[react] 공용컴포넌트 만들고, 컴포넌트타입 동적으로 설정하기

TheTabButton 공용컴포넌트를 만들면서 한번 정리해보면 좋을 것 같아 작성하여본다.

export default function TabButton({ children, onSelect, isSelected }) {
  return (
	<li>
      <button className={isSelected ? 'active' : undefined} onClick={onSelect}>
        {children}
      </button>
    </li>
  );
}

동적으로 props를 통해 관리해야할 것들은 반드시 중괄호로 감싸주어야 한다.

그리고 해당 컴포넌트를 사용하는 곳으로 가보자.

<TabButton  isSelected={selectedTopic === 'components'} onSelect={() => handleSelect('components')}>
              component
</TabButton>

이런식으로 작성하면 isSelected가 true가 되기때문에 active 스타일링이 적용된다.

---

다음으로 컴포넌트타입을 동적으로 설정해보자.

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

buttonsContainer를 받을 건데 해당 Tabs 컴포넌트를 사용할 때에
Tabs buttonsContainer="menu" 또는 Tabs buttonsContainer="div" 이렇게 올 수도 있고, 커스텀 컴포넌트로 올 수도 있다.

위의 코드를 보면 ButtonContainer라고 변수를 새로 생성하여 커스텀 컴포넌트를 지정한다!!(대문자로 필히 !!) 한번에 ButtonsContainer로 변수 생성없이 해도된다.

커스텀컴포넌트로는 Tabs buttonsContainer={Section} 이렇게 넘어온다.