자바스크립트 + 리액트 디자인 패턴

287

Chapter 12_

리액트 디자인 패턴

12.3

렌더링

Props

패턴

고차 컴포넌트에서 살펴보았듯이, 여러 컴포넌트가 동일한 데이터에 접근하거나 동일한 로

직을 포함해야 할 때 컴포넌트 로직을 재사용하면 개발이 편리해집니다.

렌더링

Props

패턴은 컴포넌트를 재사용하는 또 다른 방법입니다. 렌더링

prop

은

JSX

요소

를 반환하는 함수 값을 가지는 컴포넌트의

prop

입니다. 컴포넌트 자체는 렌더링

prop

외에

는 아무것도 렌더링하지 않습니다. 자신의 렌더링 로직을 구현하는 대신, 렌더링

prop

을 호

출합니다.

렌더링

prop

을 활용해 값을 전달하면 해당 값을 화면에 표시하는

Title

컴포넌트를 만들어

봅시다.

Title

컴포넌트가 렌더링할 값을 렌더링

prop

에 전달해 보겠습니다.

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

렌더링

prop

을 호출하여 반환된 값을 통해

Title

컴포넌트 내에 데이터를 표시할 수 있습

니다.

const Title = props => props.render();

리액트 요소를 반환하는 함수인

render

라는

prop

을 컴포넌트에 전달해야 합니다.

import React from "react";

import { render } from "react-dom";

import ...