컴포넌트에서 다른 컴포넌트 담기

어떤 자식 컴포넌트가 들어올지 미리 예상할수 없는 경우가있다. '박스'역할을 하는 Sidebar 혹은 Dialog와 같은 컴포넌트에서 특히 자주 볼수 있다.

이러한 경우에는 특수한 children prop을 사용하여 자식 엘리먼트를 출력에 그대로 전달하는 것이 좋다.

function Border(props) {
  return (
    <div className={`Border Border-${props.color}`}>
      {props.children}
    </div>
  )
}

JSX를 중첩하여 임의의 자식을 전달할 수 있다.

function WelcomeDialog() {
  return (
    <Border color="blue">
      <h1 className ="Dialog-title">
      	Welcome
      </h1>
      <p className = "Dialog-message">
        Thank you for visiting our spaceraft!
      </p>
    </Border>
  )
}

<Border> JSX태그 안에 잇는 것들이 Border컴포넌트의 children prop으로 전달된다. Border 는 {props.childrne}을 <div> 안에 렌더링 하므로 전달된 엘리먼트들이 최종 출력된다.

다른경우로 여러개의 "구멍"이 필요할 수 있다. children대신 자신만의 고유한 방식을 적용할 수도 있다.

💻 코드 보기

<Contacts/> 와 <Chat/> 같은 React엘리먼트는 단지 객체이기 때문에 다른 데이터처럼 prop으로 전달할 수 있다. 이러한 접근은 다른라이브러리의 "슬롯"과 비슷해 보이지만 React에서 prop으로 전달할수 있는 것에는 제한이 없다.

특수화

때로는 어떤 컴포넌트의 "특수한 경우" 인 컴포넌트를 고려 해야하는 경우가 있다. 예를 들어, WelcomeDialog는 Dialog의 특수한 경우라고 할 수 있다.

더 구체적인 컴포넌트가 일반적인 컴포넌트를 렌더링 하고 props를 통해 내용을 구성한다.

💻 코드 보기

합성은 클래스로 정의된 컴포넌트에서도 동일하게 적용된다.

💻 코드보기

상속

컴포넌트를 상속 계층 구조로 작성을 권장할만한 사례를 아직 찾지 못함.

UI가 아닌 기능을 여러 컴포넌트에서 재사용하기를 원한다면, 별도의 JavaScript모듈로 분리하는 것이 좋다. 컴포넌트에서 상속받을 필요없이 해당 함수, 객체, 클래스 등을 import하여 사용할수 있다.