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

281

Chapter 12_

리액트 디자인 패턴

리액트는 여러 해에 걸쳐 지속적으로 발전해왔습니다. 그동안 라이브러리에 새롭게 도입된

다양한 기능들 덕분에 흔히 발생하는 문제들을 쉽게 해결할 수 있었습니다. 다음 절에서는

리액트에서 널리 사용되는 몇 가지 디자인 패턴들을 자세히 살펴보겠습니다.

■ 고차

High

-

Order

컴포넌트

패턴

■ 렌더링

Props

패턴

■

Hooks

패턴

■ 정적 가져오기

■ 동적 가져오기

■ 코드

스플리팅

Code

Splitting

■

PRPL

패턴

■ 로딩

우선순위

Prioritization

12.2

고차 컴포넌트

애플리케이션 내 여러 컴포넌트에서 동일한 로직을 사용하고 싶은 때가 종종 있습니다. 이러

한 로직에는 컴포넌트에 특정 스타일을 적용하거나, 인증을 요구하거나, 전역 상태를 추가하

는 등이 포함될 수 있습니다. 고차 컴포넌트

Higher

-

Order

Component

(

HOC

) 패턴은 여러 컴포넌트

에서 동일한 로직을 재사용하는 방법 중 하나입니다. 이 패턴을 사용하면 애플리케이션 전체

에서 컴포넌트 로직을 재사용할 수 있습니다.

고차 컴포넌트는 다른 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 컴포넌트입니

다. 고차 컴포넌트는 특정 기능을 포함하고 있어, 이 기능을 매개변수로 전달받은 컴포넌트

에 적용할 수 있습니다. 그리하여 고차 컴포넌트는 인자로 받은 컴포넌트에 추가 기능을 적

용한 새로운 컴포넌트를 반환합니다.

애플리케이션 내 여러 컴포넌트에 특정 스타일을 적용하고 싶다고 가정해 봅시다. 매번 스타