$$config title: [React] Render Props keywords: - IT - React - Render Props $$ ? render prop란, ````React 컴포넌트 간에 코드를 공유하기 위해 함수 props를 이용```` 하는 간단한 테크닉이다.
render props 패턴으로 구현된 컴포넌트는 자체적으로 렌더링 로직을 구현하는 대신, react 엘리먼트 요소를 반환하고 이를 호출하는 함수를 사용한다. ````html (

Hello {data.target}

)}/> ```` render props를 사용하는 라이브러리는 React Router, Downshift, Formik 이 있다.
# 사용법 컴포넌트는 React에서 코드의 재사용성을 위해 사용하는 주요 단위 이다. 하지만 컴포넌트에서 캡슐화된 상태나 동작을 같은 상태를 가진 다른 컴포넌트와 공유하는 방법이 항상 명확하지는 않다.
아래의 컴포넌트는 웹 애플리케이션에서 마우스 위치를 추적하는 로직 이다. ````js class MouseTracker extends React.Component { constructor(props) { super(props); this.handleMouseMove = this.handleMouseMove.bind(this); this.state = { x: 0, y: 0 }; } handleMouseMove(event) { this.setState({ x: event.clientX, y: event.clientY }); } render() { return (

Move the mouse around!

The current mouse position is ({this.state.x}, {this.state.y})

); } } ```` 스크린 주위로 마우스 커서를 움직이면, 컴포넌트가 마우스의 (x, y) 좌표를 < p >에 나타낸다.
다른 컴포넌트에서 이 행위를 재사용하려면 어떻게 해야 할까 ? ````여기에 render prop를 사용할 수 있다.```` < Mouse >에게 동적으로 렌더링할 수 있도록 해주는 함수 prop을 제공하는 것 이다. 이것이 ````render prop의 개념 이다.```` ````js class Cat extends React.Component { render() { const mouse = this.props.mouse; return (

); } } class Mouse extends React.Component { constructor(props) { super(props); this.handleMouseMove = this.handleMouseMove.bind(this); this.state = { x: 0, y: 0 }; } handleMouseMove(event) { this.setState({ x: event.clientX, y: event.clientY }); } render() { return (

{this.props.render(this.state)}

); } } class MouseTracker extends React.Component { render() { return (

Move the mouse around!

( )}/>

); } } ```` 컴포넌트의 행위를 복제하기 위해 하드 코딩할 필요 없이 render 함수에 prop으로 전달해줌으로써, 컴포넌트는 동적으로 트래킹 기능을 가진 컴포넌트들을 렌더링할 수 있다.
````정리하자면, ★render prop은 무엇을 렌더링할지 컴포넌트에 알려주는 함수이다.````