합성 vs 상속 - 주요 개념

선 결론 : 언제나 합성 승리

합성 Composition : 여러 컴포넌트를 합쳐서 하나의 큰 컴포넌트 만들기. props와 state, hooks의 환상적인 협동 액션이 합성을 받쳐준다.
컴포넌트 간 코드 재사용에도 유리.

상속 Inheritance : OOP의 상속을 생각하면 될 듯 하다. 그런데 페이스북은 상속을 사용한적이 한 번도 없다고 한다.. 그래서 공식문서에서도 뭐라고 정의를 딱히 안해놨음.

리액트 18 ?

새로운 공식문서에는 composition, inheritance 개념이 없다!

일단 상속이 OOP 개념인데, 사실상 클래스 컴포넌트를 버리는 흐름이라..

모든 컴포넌트 만들기는 합성으로 이뤄지니까, 굳이 이 부분은 문서에서 설명하지 않아도 된다고 생각한 듯.

컴포넌트 안에 컴포넌트 넣기

{props.children}

• 사실상 이렇게 안쓰긴 한다. 그래도 예전 코드들 보다보면 (특히 template 산 경우 볼 확률이 확 높아짐)

• 컴포넌트는 인자로 props 하나만을 받음. 그래도 이 props 객체에는 아주아주 많은 (거의 모든 타입의) 것들을 넣어서 전달할 수 있음.

const WelcomeDialog = () => {
  return (
    <FancyBorder color="blue">
    
    // 이놈
      <h1 className="Dialog-title">
        Welcome
      </h1>
    // 이놈
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    
    </FancyBorder>
  );
}

const FancyBorder = (props) => {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children} // "이놈"들 = children 에 담겨있다.
    </div>
  );
}

• 컴포넌트 안에 끼워넣은 자식 노드 (리액트 엘리먼트)들 = props.children 에서 꺼내 쓸 수 있음.

props 에서 하나씩 꺼내쓰기

• 다른 컴포넌트 역시 props로 받을 수 있다.

• props 이름을 정해서 넣어주고, 그것을 꺼내 쓰면 됨.

const App = () => {
  return (
    <SplitPane
      left={
        <Contacts /> // left 라는 props에 넣어둠
      }
      right={
        <Chat /> // right 라는 props에 넣어둠
      } />
  );
}

// 공식문서의 정석적 활용
const SplitPane = (props) => {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left} // left 에서 꺼내 쓸 수 있다.
      </div>
      <div className="SplitPane-right">
        {props.right} // right 에서 꺼내 쓸 수 있다.
      </div>
    </div>
  );
}

// 요즘은 이렇게 쓰는 경우가 더 많을 것임.
const SplitPane = ({left, right}) => {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {left} // left 에서 꺼내 쓸 수 있다.
      </div>
      <div className="SplitPane-right">
        {right} // right 에서 꺼내 쓸 수 있다.
      </div>
    </div>
  );
}