[React] HTML 요소 동적으로 설정하기

컴포넌트를 재사용할 때마다 감싸는 요소가 달라야 한다면?

export default function Tabs({ children, buttons}) {
    return <>
        <menu? div? ul?>
            {buttons}
        </menu? div? ul?>
        {children}
    </>
}

• 때에 따라 <menu>, <div>, <ul> 등으로 변경되어야 할 수 있다.

 

 

속성으로 넘기기1 - 상수 설정하기

<Tabs
  container="menu"
  buttons={
    <>
      ...
    </>
  }
>
  {tabContent}
</Tabs>

• container라는 속성을 추가하고 그 안에 태그로 사용할 문자열을 넣는다.
  • container=”menu”, container=”div”…

export default function Tabs({ children, buttons, container }) {
    const Container = container;
    return <>
        <Container>
            {buttons}
        </Container>
        {children}
    </>
}

• Tabs 컴포넌트에 container 속성을 가져와 상수 또는 변수로 선언한다.
  • const Container = container;
• 그리고 태그명으로 사용한다. <Container>
• html에서는 <menu></menu>로 출력된다.

 

속성으로 넘기기2 - 대문자 상수 받기

<Tabs
  Container="menu"
  buttons={
    <>
      ...
    </>
  }
>
  {tabContent}
</Tabs>

• 속성을 애초에 대문자로 작성하고 Container=”menu”

export default function Tabs({ children, buttons, Container }) {
    return <>
        <Container>
            {buttons}
        </Container>
        {children}
    </>
}

• 속성 대문자로 받아 바로 사용한다. <Container>