Render Props

Render Props

React 컴포넌트 간에 코드를 공유하기 위해 함수 props를 이용하는 방법

<DateProvider render={data => (<h1>hello</h1>)}/>

이러한 방법을 사용하는 라이브러리로 React Router 등이 있습니다.

횡단 관심사(Cross-Cutting concerns)를 위한 Render props 사용법

컴포넌트는 React에서 코드의 재사용성을 위한 단위입니다. 하지만 캡슐화된 상태거나 다른 상태를 가진 다른 컴포넌트에 상태를 공유하는 방법은 항상 고민됩니다.

이를 해결하기 위해 컴포넌트에 Render prop을 넘겨 무엇을 렌더링할지 알려주는 함수를 넘겨줍니다. 이 방법은 대부분의 HOC에 Render props pattern을 적용할 수 있습니다.

Render 이외의 props 사용법

이름을 굳이 render를 사용할 필요는 없습니다. 어떤 함수형 prop이든 render prop이 될 수 있습니다.

주의사항

React.PureComponent에서 Render props pattern을 사용할 땐 주의해야 합니다.

Render props패턴을 사용시 PureComponent를 사용할 때 이점이 사라질 수 있습니다. 얕은 prop비교는 새로운 prop에 대해 항상 false를 반환하기 때문입니다. 이 땐 state등에 변하지 않는 상태를 가지고 있는 것을 넘겨줘야합니다.