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

284

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

withLoader

가 데이터 상태를 대상 컴포넌트에 넘겨주기 때문에,

DogImages

컴포넌트 내에

서 이 데이터 상태를

prop

으로서 접근할 수 있습니다.

import React from "react";

import withLoader from "./withLoader";

function DogImages(props) {

return props.data.message.map((dog, index) => (

<img src={dog} alt="Dog" key={index} />

));

}

export default withLoader(

DogImages,

"https://dog.ceo/api/breed/labrador/images/random/6"

);

고차 컴포넌트 패턴을 사용하면 필요한 로직을 한 곳에 유지하면서 동시에 여러 컴포넌트에

동일한 로직을 제공할 수 있습니다.

withLoader

고차 컴포넌트는 어떤 컴포넌트나

URL

을

받을지 신경 쓰지 않습니다. 유효한 컴포넌트와

API

엔드포인트만 전달되면, 해당

API

엔드

포인트에서 가져온 데이터를 전달받은 대상 컴포넌트에

prop

으로 전달합니다.

12.2.1

고차 컴포넌트 조합하기

때로는 여러 고차 컴포넌트를 조합하여 사용할 수도 있습니다.

DogImages

목록 ...