Render Props 예제

wndtlr1024·2020년 5월 18일
0

끄적끄적

목록 보기
19/19

Render Props 패턴이 헷갈린다면 다음 예제를 살펴보시길 추천합니다!

import React from 'react';

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

export default RenderPropsSample

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

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

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


리액트를 다루는 기술 책 에서...

profile
https://jungsikjeong.github.io/ 이곳으로 옮겼습니다!

0개의 댓글