Composition

• 리엑트에서 컴포지션이란 다른 컴포넌트들을 사용해서 새로운 컴포넌트를 구성하는 개념을 말한다.

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}
function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}
CSS.

.FancyBorder {
  padding: 10px 10px;
  border: 10px solid;
}

.FancyBorder-blue {
  border-color: blue;
}

.Dialog-title {
  margin: 0;
  font-family: sans-serif;
}

.Dialog-message {
  font-size: larger;
}

JSX 태그 안에 있는 것들이 FancyBorder 컴포넌트의 children prop으로 전달됩니다. FancyBorder는 {props.children}을

안에 렌더링하므로 전달된 엘리먼트들이 최종 출력됩니다.

Containment

컴포넌트가 다르 컴포넌트를 가지고 있는걱

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}
This lets other components pass arbitrary children to them by nesting the JSX:

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

specialization

unction 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!" />  // 여기!!
);
}

위처럼 보다 추상화된 컴포넌트를 사용해서 특정 컴포넌트를 구현하는 것이 specialization