합성

React는 강력한 합성 모델을 가지고 있다
상속 대신 합성을 사용하여 코드를 재사용 하는 편이 좋다

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

어떤 자식 엘리먼트가 올지 예상할 수 없는 경우
children prop 을 사용하여 자식 엘리먼트 출력에 그대로 전달하는 것이 좋다

특수화

떄로는 특수한 경우인 컴포넌트를 고려해야 하는 경우가 있다

구체적인 컴포넌트가 일반적인 컴포넌트를 렌더링 하고 props로 데이터를 넘겨준다

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
    </FancyBorder>
  );
}

function WelcomeDialog() {
  return (
    <Dialog
      title="Welcome"
      message="Thank you for visiting our spacecraft!" />
  );
}

상속

리액트 컴포넌트 사용 중 상속을 해야할만한 사례는 없다
재사용이 필요하면 컴포넌트로 분리 하는편이 좋다