const Title = props => props.render();
<Title render={() => <h1>I am a render prop!</h1>} />

특징 : JSX를 리턴하는 함수

상위에 렌더링 책임, 하위에서는 받은 UI를 하위에 렌더링 하기만 한다.

A

B C D

C D에게 B의 값을 전달하려면 어떻게 해야할까?

A로 상태를 끌어올려서 전달할 수도 있다.

render props를 활용하면

A

B

(render : B, C)

function B(props) {
	const [value, setValue] = useState("");
	
	return (
		<>
			<input
				type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
				/>
	      {props.render(value)}
		</>
	)

}

function A() {
	return(
		<B
			render={(value) => (
				<>
					<C value={value} />
					<D value={value} />
				</>
			)
		/>
	)
}

A는 B에게 render prop함수를 내려준다. value를 받으면 C, D를 렌더링한다.

HOC와 비교

HOC 2개를 중첩하여 렌더링하는 경우를 살펴보자

( A ) - data = 2