[React] 동적 컴포넌트 렌더링

 

React 애플리케이션을 개발하다 보면 때때로 컴포넌트의 일부를 동적으로 결정해야 할 필요가 있습니다. 오늘은 React에서 컴포넌트를 동적으로 렌더링하는 강력한 패턴에 대해 알아보겠습니다.

 

동적 컴포넌트 렌더링이 필요한 이유

애플리케이션의 여러 부분에서 재사용되는 컴포넌트를 만들 때, 때로는 해당 컴포넌트의 일부 요소를 사용 context에 따라 다르게 렌더링하고 싶을 수 있습니다. 예를 들어, Tabs 컴포넌트에서 탭 버튼들을 감싸는 컨테이너 요소를 동적으로 결정하고 싶다고 가정해 봅시다.

 

이를 구현하기 위한 핵심 아이디어는 컴포넌트 식별자를 prop으로 전달하는 것입니다. 다음과 같이 구현할 수 있습니다:

function Tabs({ buttonsContainer: ButtonsContainer = 'menu', ...props }) {
  return (
    <div>
      <ButtonsContainer>
        {/* 탭 버튼들 */}
      </ButtonsContainer>
      {/* 탭 내용 */}
    </div>
  );
}

// 또는
function Tabs({ buttonsContainer = 'menu', ...props }) {
  const ButtonsContainer = buttonsContainer;
  return (
    <div>
      <ButtonsContainer>
        {/* 탭 버튼들 */}
      </ButtonsContainer>
      {/* 탭 내용 */}
    </div>
  );
}

⚠️ 동적으로 렌더링할 컴포넌트를 받는 prop 이름은 대문자로 시작해야 합니다. 그렇지 않으면 React는 이를 내장 HTML 요소로 취급합니다.

 

이제 Tabs 컴포넌트를 사용할 때 다음과 같이 컨테이너 요소를 지정할 수 있습니다:

<Tabs buttonsContainer="menu" />
// 또는
<Tabs buttonsContainer="div" />
// 또는 커스텀 컴포넌트 사용
<Tabs buttonsContainer={Section} />

⚠️ 내장 요소 vs 커스텀 컴포넌트: 내장 HTML 요소를 사용할 때는 문자열로 전달하고, 커스텀 컴포넌트를 사용할 때는 중괄호 {} 안에 컴포넌트 이름을 전달합니다.