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

285

Chapter 12_

리액트 디자인 패턴

export default withHover(

withLoader(DogImages, "https://dog.ceo/api/breed/labrador/images/random/6")

);

이제

DogImages

엘리먼트는

withHover

와

withLoader

에서 전달된 모든

props

를 가지게

됩니다.

Hooks

패턴을 사용하여 비슷한 결과를 얻는 것도 가능합니다.

Hooks

패턴은 뒤에서 자세

히 다루겠지만, 간단히 말하자면

Hooks

를 사용하면 컴포넌트 트리가 단순해지고, 고차 컴포

넌트 패턴을 사용하면 깊게 중첩된 컴포넌트 트리가 만들어지기 쉽습니다. 고차 컴포넌트 패

턴은 다음과 같은 경우에 효과적입니다.

■ 애플리케이션 전체에 걸쳐 여러 컴포넌트에 동일한 동작을 적용해야 할 때

■ 추가된 커스텀 로직 없이도 컴포넌트가 독립적으로 작동할 수 있을 때

12.2.2

장점

고차 컴포넌트 패턴을 사용하면 재사용하고자 하는 로직을 한 곳에 모아 관리할 수 있습니

다. 이렇게 하면 코드를 여기저기 복사하면서 실수로 버그를 퍼뜨릴 위험을 줄일 수 있습니

다. 로직을 한 곳에 집중시킴으로써 코드를

DRY

하게 유지하고, 효과적으로 관심사를 분리

할 수 있습니다.

12.2.3

단점

고차 컴포넌트가 대상 컴포넌트에 전달하는

prop ...