리액트를 다루는 기술 [개정판]: 15.2.2 Consumer 사용하기

Consumer 사이에 중괄호를 열어서 그 안에 함수를 넣어 주었습니다. 이러한 패턴을 Function as a child, 혹은 Render Props라고 합니다. 컴포넌트의 children이 있어야 할 자리에 일반 JSX 혹은 문자열이 아닌 함수를 전달하는 것이죠.

노트 Render Props 예제

Render Props 패턴이 헷갈린다면 다음 예제를 살펴보세요. 이해하는 데 도움이 될 것입니다.

import React from 'react';
 
const RenderPropsSample = ({ children }) => {
  return <div>결과: {children(5)}</div>;
};
 
export default RenderPropsSample;

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

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

RenderPropsSample에게 children props로 파라미터에 2를 곱해서 반환하는 함수를 전달하면 해당 컴포넌트에서는 이 함수에 5를 인자로 넣어서 "결과: 10"을 렌더링합니다.

신간 소식 구독하기

뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.