React 컴포넌트에서 태그명 바꾸기

Tabs.jsx 는 다음과 같다

export default function Tabs({ children, buttons }) {
 

  return (
    <>
      <menu>{buttons}</menu>
      {children}
    </>
  );
}

그런데 Tabs 컴포넌트를 사용하다보면 menu 태그를 div로 바꾼다거나, li를 바꾼다거나 해야할 일이 생길 것이다.

그럴땐

export default function Tabs({ children, buttons, container }) {
  let Container = container;

  return (
    <>
      <Container>{buttons}</Container>
      {children}
    </>
  );
}

Container 변수를 만들어 container 로 지정해주고 태그에 Container 를 써주면된다.
소문자로 쓰면 안되는 이유는 태그로 인식하기 때문.

<Tabs
        container="menu"
        buttons={
          <>
            <TabButton
              onClick={() => handleSelect("props")}
              isSelected={selectedTopic === "props"}
            >
              데이터 전달
            </TabButton>
            <TabButton
              onClick={() => handleSelect("component")}
              isSelected={selectedTopic === "component"}
            >
              재사용 컴포넌트
            </TabButton>
            <TabButton
              onClick={() => handleSelect("styling")}
              isSelected={selectedTopic === "styling"}
            >
              동적 스타일링
            </TabButton>
          </>
        }
      >
        {tabContent}
      </Tabs>

그리고 container 에 원하는 태그를 써주면 된다.