React - 합성

React - 합성(React 공식문서)

 

 

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

합성 (Composition) vs 상속 (Inheritance) – React

 

 

어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올 지 미리 예상할 수 없는 경우가 있다. 범용적인 '박스' 역할을 하는 Sidebar 혹은 Dialog와 같은 컴포넌트에서 자주 볼 수 있다.

 

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

 

특수화

때로는 어떤 컴포넌트의 "특수한 경우"인 컴포넌트를 고려해야 할 경우가 있다. 공식문서의 예시에는 SignUpDialog, Dialog를 예시로 들고있다.

 

function FancyBorder(props) { //border를 추가하는 컴포넌트 합성
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

function Dialog(props) { //일반적인 컴포넌트 합성
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title} //title prop을 받음.
      </h1>
      <p className="Dialog-message">
        {props.message} //message prop을 받음.
      </p>
      {props.children} //Dialog아래의 자식 엘리먼트들을 출력
    </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" //좀 더 구체적인 컴포넌트 SignUpDialog에서 일반적인 컴포넌트 렌더링
              message="How should we refer to you?">
        <input value={this.state.login}
               onChange={this.handleChange} />
        <button onClick={this.handleSignUp}>
          Sign Me Up!
        </button>
      </Dialog>
    );
  }