[React] 동적 컴포넌트 적용하기 ( 동적으로 태그 및 컴포넌트를 자식에 적용 )

 

자식 컴포넌트에서 사용할 태그 혹은 컴포넌트가

기본 HTML 태그일 때는  buttonContainer='문자열 태그명' 으로 속성 값을 주고

사용자 정의 컴포넌트를 넘겨줄 때는(예를 들어 Menu 라는 컴포넌트가 있다면)  buttonContainer={ Menu }

로 자식 컴포넌트에 전달하면 됩니다

 

 

부모 컴포넌트1

 <Tabs buttonContainer='menu' buttons={buttons}>{tabContent}</Tabs>

 

 

 

자식 컴포넌트2

export default function Tabs({children, buttons, buttonContainer}) {
  const ButtonContainer = buttonContainer // 사용자 컴포넌트로 인식되게 첫글자가 대문자인 변수 저장
  return (
    <>
      <ButtonContainer> <menu> 로 랜더링 되게 됨
        {buttons}
      </ButtonContainer>
      {children}
    </>
  )
}

 

 

그리고 이걸 좀 더 축약한다면 부모 컴포넌트에서 속성명을 첫글자 대문자로 주면 

const ButtonContainer = buttonContainer  을 생략할 수 있다.

 

부모 컴포넌트1

 <Tabs ButtonContainer='menu' buttons={buttons}>{tabContent}</Tabs>

 

 

자식 컴포넌트2

export default function Tabs({children, buttons, ButtonContainer}) {
  return (
    <>
      <ButtonContainer> <menu> 로 랜더링 되게 됨
        {buttons}
      </ButtonContainer>
      {children}
    </>
  )
}

 

 

 

참고로 vue 의 :is 와 같은 역할이다