[React] Render Props

다음은 책 리액트를 다루는 기술을 읽고 공부한 내용으로 작성된 글입니다.

 

const RenderPropsSample = ({children}) => {
	return <di> 결과: {children(5)} </div>;
};

export default RenderPropsSample;

만약 위와 같은 컴포넌트가 있다면 추후 사용할 때 다음과 같이 사용할 수 있다.

<RenderPropsSample>{value=> 2*value}</RenderPropsSample>;

RenderPropsSample 에게 children으로 함수를 전달하면, 해당 컴포넌트에서는 이 함수에 5를 인자로 넣어서 결과 : 10을 렌더링한다.

 

이러한 패턴을 Function as a child, 혹은 Render Props라고 한다. 

컴포넌트의 children이 있어야 할 자리에 일반 JSX 혹은 문자열이 아닌 함수를 전달하는 것이다.