※ 공식문서를 읽고 정리한 글입니다.

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

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>
  );
}

• 어떤 컴포넌트나 엘리먼트가 들어올지 모를 때, children prop을 사용해 자식 엘리먼트를 그대로 화면에 출력할 수 있음
  예문에서는 FancyBorder 컴포넌트 내부에 WelcomeDialog의 내용이 그대로 출력됨

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

function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}

• React Element역시 객체이기 때문에 prop으로 전달할 수 있음
  리액트에서 prop으로 전달할 수 있는 것에는 제한이 없음
• 여러개의 컴포넌트를 출력해야 하는 경우에는 자체적으로 속성을 적용해서 사용하면 됨

특수화

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

• 컴포넌트 중에서 특수한 케이스를 고려해야 하는 경우에도 컴포넌트의 합성을 통해 해결할 수 있음
  예문에서는 WelcomeDialog의 값을 Dialog 컴포넌트와 합성해 원하는 컴포넌트를 얻어냄

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

class SignUpDialog extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);
    this.state = {login: ''};
  }

  render() {
    return (
      <Dialog title="Mars Exploration Program"
              message="How should we refer to you?">
        <input value={this.state.login}
               onChange={this.handleChange} />
        <button onClick={this.handleSignUp}>
          Sign Me Up!
        </button>
      </Dialog>
    );
  }

  handleChange(e) {
    this.setState({login: e.target.value});
  }

  handleSignUp() {
    alert(`Welcome aboard, ${this.state.login}!`);
  }
}

• 클래스로 정의된 컴포넌트에서도 마찬가지로 사용 가능
  Dialog의 title, message뿐만 아니라 child로 추가적인 jsx코드 전달

What About Inheritance?

• React에서 prop과 합성을 통해 명시적이고 안정적으로 컴포넌트의 모양과 동작을 커스터마이징 가능 -> 상속 비권장
• 기능을 여러 컴포넌트에서 재사용하고싶으면 자바스크립트 모듈을 분리해 import해서 사용하는것을 권장

출처:
https://reactjs.org/docs/composition-vs-inheritance.html