https://ko.reactjs.org/docs/render-props.html

https://www.robinwieruch.de/react-render-props-pattern/

class Amount extends Component {
  ...

  render() {
    return (
      <div>
        <span>US Dollar: {this.state.amount} </span>

        <button type="button" onClick={this.onIncrement}>
          +
        </button>
        <button type="button" onClick={this.onDecrement}>
          -
        </button>

        <Euro amount={this.state.amount} />
        <Pound amount={this.state.amount} />
      </div>
    );
  }
}

• 이러한 구조에서 <Euro>, <Pound> 등의 컴포넌트를 <Amount> 내부가 아닌 외부에서 설정 하고 싶은 경우가 있다.
• 캡슐화된 콤포넌트에서 어떤 핸들러를 제공할 때?
• 컴포넌트의 children으로 컴포넌트를 넣으면서 어떤 변수나 값을 parent로 부터 쓰고 싶을 때?

const App = () => (
  <div>
    <Amount />

    <Euro amount={amount} />
    <Pound amount={amount} />
  </div>
);

• 하지만 이런 경우 amount에 대한 정보를 <Euro>, <Pound> 에서 알지 못하기 때문에 상태들을 App으로 끌어 올려서 관리해야 한다.

const App = () => (
  <Amount>
    <Pound amount={amount} />
    <Euro amount={amount} />
  </Amount>
);

• 이런 경우에는 amount를 자식들이 알지 못한다.

{this.props.children && this.props.children.map((option) => {
  const childrenWithProps = React.Children.map(option, child => React.cloneElement(child, { handleOption: this.handleOption }));
  return (
      childrenWithProps
  );
})}

• 예전에 이와 같은 방식으로 처리 했었다.