React의 동적 구성 요소 이름

1. 동적 구성 요소 이름 및 JSX
2. React의 동적 구성 요소 이름

React는 UI 구축을 위한 가장 인기 있는 선택 중 하나입니다. React를 사용하여 콘텐츠를 동적으로 표시하고 숨기고 조건부로 CSS 스타일을 적용하는 등 사용자의 작업에 즉시 응답할 수 있습니다.

이 기사에서는 React의 동적 구성 요소 이름에 대해 설명합니다.

동적 구성 요소 이름 및 JSX

React에서 렌더링된 구성 요소의 이름을 동적으로 변경하는 방법을 이해하려면 먼저 템플릿 언어 JSX를 이해해야 합니다.

JSX는 React의 기본 템플릿 언어입니다. 이를 통해 React 개발자는 선언적으로 구성 요소의 깔끔한 계층 구조를 만들 수 있습니다.

JSX를 통해 개발자는 최상위 수준의 React API를 사용하는 것보다 더 빠르게 React 애플리케이션을 구축할 수 있습니다.

JSX는 쓰기 쉽고 읽기 쉬운 구문이라는 점을 이해하는 것이 중요합니다. 내부적으로 모든 React 애플리케이션은 createElement(), createFactory(), cloneElement() 등과 같은 React의 최상위 API에 있는 메서드에 대한 복잡한 호출로 구성됩니다.

React의 동적 구성 요소 이름

블로그가 있고 텍스트, 비디오 또는 그림과 같은 다양한 유형의 구성 요소를 동적으로 렌더링하려고 한다고 가정해 보겠습니다.

먼저 구성 요소를 호출하기 전에 구성 요소를 정의하고 생성해야 합니다. 동적으로 생성할 수 없습니다. 그러나 동적 값에 따라 다른 구성 요소로 해석될 수 있는 <SomeComponent>를 선언적으로 호출할 수 있습니다.

JSX에서 <SomeComponent>를 작성하면 React.createElement(SomeComponent, {}) 메서드에 대한 호출로 React의 기본 수준 API로 변환됩니다. React.createElement() 메서드의 첫 번째 인수는 HTML 태그 또는 함수여야 합니다. 따라서 SomeComponent 변수는 HTML 요소 또는 구성 요소를 참조해야 합니다.

초보자는 구성 요소 이름을 동적으로 생성하고 변수에 문자열로 저장하는 실수를 자주 합니다. 이것은 React.createElement() 메서드의 첫 번째 인수가 일반 문자열일 수 없기 때문에 잘못된 것입니다.

예를 들어 이것은 잘못된 것입니다.

var category = "Text";
var SomeComponent = category + "Component";
return <SomeComponent />;

언뜻 보기에 코드 스니펫의 모든 것이 제대로 작동해야 하지만 문자열 값이 대문자인 경우에도 SomeComponent 변수에 문자열 값이 포함되기 때문에 작동하지 않습니다. 대신 유효한 React 구성 요소(또는 HTML 태그)여야 합니다.

React에서 동적 구성 요소 이름을 갖는 올바른 방법

각 구성 요소 유형에 대한 속성 이름을 사용하여 개체를 만듭니다. 이러한 속성의 값은 실제 React 구성 요소를 참조해야 합니다.

그런 다음 동적으로 생성된 문자열이 있는 변수를 가질 수 있으며 이 변수를 사용하여 개체에 저장된 구성 요소 중 하나를 참조할 수 있습니다.

실제 코드를 살펴보겠습니다.

export default function App() {
  const componentNames = {
    text: TextComponent,
    video: VideoComponent,
    picture: PictureComponent
  };
  var category = "text";
  var SomeComponent = componentNames[category];
  return (
    <div className="App">
      <SomeComponent />
    </div>
  );
}

function TextComponent() {
  return (
    <div>
      <h1>I am a dynamically named Text Component</h1>
    </div>
  );
}
function VideoComponent() {
  return (
    <div>
      <h1>I am a dynamically named Video Component</h1>
    </div>
  );
}
function PictureComponent() {
  return (
    <div>
      <h1>I am a dynamically named Picture Component</h1>
    </div>
  );
}

CodeSandbox에서 직접 코드를 시도하고 편집할 수 있습니다.

여기에 하나의 부모 구성 요소와 세 개의 자식 구성 요소의 기본 예가 있습니다. 기술적으로 부모는 하나의 자식 구성 요소만 갖지만 세 가지 구성 요소(TextComponent, VideoComponent 및 PictureComponent)는 category 변수의 값에 따라 그 자리를 차지할 수 있습니다.

현재 category 변수는 text로 설정되어 있습니다. 이를 사용하여 componentNames 개체에서 해당 TextComponent를 조회합니다. 필요한 구성 요소 유형을 결정하면 이를 SomeComponent 변수에 저장합니다.

App 구성 요소에서 category 변수의 문자열 값에 따라 세 가지 다른 구성 요소를 참조할 수 있는 SomeComponent 변수를 호출합니다.

이는 특정 구성 요소를 동적으로 렌더링하거나 렌더링하지 않는 데 사용할 수 있는 강력한 기능입니다. 이 경우 정적 문자열 값이 있습니다. 그러나 사용자 입력을 수집하고 사용하여 렌더링해야 하는 구성 요소와 건너뛸 수 있는 구성 요소를 결정할 수 있습니다.