리액트 Component를 String 이름으로 동적 생성하기

입력받은 props에 따라 동적으로 리액트Component를 바꾸고 싶어서 알아보았습니다. 

동일한 질문이 다행히 스택오버플로우에 있어서 답을 구할 수 있었습니다. 몇가지 방법이 있는데 @gmfvpereira의 답변이 아무래도 리액트 공식 문서에서 알려주는 방식이라서 제일 맘에 듭니다.

문자열로 React Component 생성하기

아래는 string에 따라서 그에 맞는 component로 변환하는 방법 예시입니다.

잘못된 방법 

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // Wrong! JSX type can't be an expression.
  return <components[props.storyType] story={props.story} />;
}

올바른 방법

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // Correct! JSX type can be a capitalized variable.
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}

components 딕셔너리 안에 미리 key와 컴포넌트 value를 선언해두었다가 런타임 중에 key값으로 컴포넌트를 결정합니다. 이때 이를 그대로 JSX 안에 쓰면 안되고, 대문자로 변환하고 JSX 타입으로 바꾼 다음에 쓰면 됩니다.

알고나니 간단한 방법이네요. 괜히 고민한 것 같습니다. 스택오버플로우와 리액트 공식문서 사랑입니다.