15. 컴포넌트 구성: 특별한 children Prop

• 프로젝트 링크

• 컴포넌트 구성: 특별한 children Prop

  • children 은 내장 props 이다.
  • children 은 컴포넌트 태그 사이에 있는 내용을 의미한다.
  • 아래와 같이 컴포넌트가 다른 컴포넌트 내용을 감싸서 구축하는 것을 '컴포넌트 합성'이라고 한다.
  src/App.tsx

  import TabButton from "./TabButton";
  
  function App() {
    return (
      <section id="examples">
        <h2>Examples</h2>
        <menu>
          <TabButton>Components</TabButton>
        </menu>
      </section>
    );
  }
  

  src/components/TabButton.tsx

  function TabButton({children}) {
    return (
      <li>
        <button type="button">{children}</button>
      </li>
    );
  }
  
  export default TabButton;