1. Composition

: 여러개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 (합성)

2. Composition 사용기법

1) Containment

: 하위 컴포넌트를 포함하는 형태의 합성 방법

[방법]

1. children이라는 props를 사용해서 조합

function WelcomeDiaglog(props) {
  return (
    <FancyBorder color="blue">
      <h1>어서오세요</h1>
      <p>우리 사이트에 방문하신 것을 환영합니다.</p>
    </FancyBorder>
  )
}

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  )
}

여러 개의 children 집합이 필요한 경우는 어떻게 할까?

function SplitPanel(props) {
  return (
    <div className="SplitPanel">
      <div className="SplitPanel-left">
        {props.left}
      </div>
      <div className="SplitPanel-right">
        {props.right}
      </div>
    </div>
  )
}

function App(props) {
  return (
    <SplitPanel
      left={
        <Contacts/>
      }
      right={
        <Chat/>
      }
     />
  )
}

2) specialization

객체 지향 언어에서는 “상속”을 사용하여 specialization을 구현함

리액트에서는 “합성”을 사용하여 specialization을 구현함