React에서 동적 컴포넌트 선택하기

React에서 여러 컴포넌트 중 하나를 렌더링하려면 허용된 각 카테고리를 컴포넌트 함수에 매핑하고, 선택된 함수를 조회한 뒤, 대문자로 시작하는 JSX 변수를 통해 렌더링하세요. "text"와 같은 카테고리 문자열로 컴포넌트를 선택할 수는 있지만, 컴포넌트 이름을 문자열로 만든다고 해서 그 문자열이 JavaScript 변수에 대한 참조가 되지는 않습니다.

동적 컴포넌트 이름과 JSX

JSX는 UI를 설명하기 위한 구문이며, 컴포넌트를 조회하는 별도의 메커니즘이 아닙니다. JSX에서 <section>과 같은 소문자 이름은 내장 HTML 요소를 나타내고, <SomeComponent />와 같은 대문자 식별자는 스코프 안에 있는 JavaScript 변수를 가리킵니다. 그 변수에는 컴포넌트 함수 또는 그 밖에 지원되는 컴포넌트 유형이 들어 있어야 합니다.

JSX는 프로젝트의 컴파일러 설정에 따라 변환됩니다. 어떤 구성은 React.createElement를 사용하고, 어떤 구성은 다른 런타임을 사용하므로, 정확히 생성되는 호출은 설정에 따라 달라집니다. React.createElement는 지원되는 요소 유형과 props가 주어졌을 때 React 요소를 만들 수 있는 함수입니다.

React의 동적 컴포넌트 이름

블로그에서 텍스트, 비디오 또는 그림 콘텐츠를 표시할 수 있다고 가정해 보겠습니다. 먼저 해당 컴포넌트들을 정의한 다음, 그 참조들 중에서 선택하세요. 이름을 연결하면 문자열만 생성됩니다.

const SomeComponent = category + "Component";

예를 들어 category가 "Text"이면 SomeComponent는 "TextComponent"가 됩니다. JSX는 그 문자열을 사용해 JavaScript 스코프에서 같은 이름의 변수를 찾지 않습니다. 문자열은 문자열 요소 유형을 지원하는 API에서 내장 HTML 태그를 나타낼 수 있지만, 사용자 정의 컴포넌트 변수를 해결하지는 않습니다. 문자열의 대소문자를 바꿔도 그 유형이 바뀌거나 컴포넌트 참조가 되지는 않습니다.

React에서 동적 컴포넌트 이름을 갖는 올바른 방법

허용된 카테고리 값에서 이미 정의된 컴포넌트로의 명시적인 매핑을 만드세요. 선택된 참조를 조회하고, 해당 카테고리가 지원되는지 확인한 뒤, 대문자로 시작하는 JSX 식별자를 사용해 그 참조를 렌더링하세요.

이 완전한 JavaScript 예제는 컴포넌트 선택지를 하나의 허용 목록 객체에 유지합니다. 각 함수는 레이블을 반환하므로, 선택 흐름을 React 빌드 설정 없이 Node.js에서 실행할 수 있습니다.

function TextComponent() {
  return "Text content";
}

function VideoComponent() {
  return "Video content";
}

function PictureComponent() {
  return "Picture content";
}

const componentByCategory = {
  text: TextComponent,
  video: VideoComponent,
  picture: PictureComponent
};

const category = "text";

if (Object.hasOwn(componentByCategory, category)) {
  const SelectedComponent = componentByCategory[category];
  console.log(SelectedComponent());
} else {
  console.log("Unsupported category");
}

Text content

React 컴포넌트에서는 매핑을 읽기 전에 같은 자체 키 검사를 사용한 다음, JSX로 선택된 참조를 렌더링하세요. 예를 들어 return <SelectedComponent />;와 같이 합니다. 카테고리는 componentByCategory의 자체 키일 때만 지원됩니다. toString과 같은 상속된 이름도 폴백으로 이동합니다. 없는 참조를 렌더링하려고 하지 말고, 폴백 컴포넌트나 메시지와 같이 인터페이스가 표시해야 할 것을 선택하세요. 이 매핑을 허용 목록으로 유지하세요. 사용자 입력은 정의된 항목 중 하나를 선택할 수 있지만, 임의의 컴포넌트 이름이나 가져오기 경로가 되어서는 안 됩니다.

제공된 CodeSandbox 예제를 사용하면 원래의 텍스트, 비디오, 그림 컴포넌트 구성을 살펴볼 수 있습니다. 애플리케이션에서는 예제 카테고리를 사용자가 선택한 값으로 교체하고, 명시적인 매핑과 폴백 동작을 유지하세요.