[React]Render Props

Render Props

“render prop”란, React 컴포넌트 간에 코드를 공유하기 위해 함수 props를 이용하는 간단한 테크닉입니다.

render props 패턴으로 구현된 컴포넌트는 자체적으로 렌더링 로직을 구현하는 대신, react 엘리먼트 요소를 반환하고 이를 호출하는 함수를 사용합니다.

<DataProvider render={data => (
  <h1>Hello {data.target}</h1>
)}/>

render props를 사용하는 라이브러리는 React Router, Downshift, Formik이 있습니다.

🐔참고문헌

리액트공식문서

https://ko.reactjs.org/docs/render-props.html#gatsby-focus-wrapper

깃허브

https://github.com/jaredpalmer/formik

예제 useFormik

https://nookpi.tistory.com/44

formik

https://intrepidgeeks.com/tutorial/how-to-use-formik-and-useformik-tools-in-react