[React] 05. 리액트 디자인 패턴 (State reducer pattern)

 

▶ [React] 01. 리액트 디자인 패턴 (Compound Components Pattern)

▶ [React] 02. 리액트 디자인 패턴 (Control Props Pattern)

▶ [React] 03. 리액트 디자인 패턴 (Custom Hook Pattern)

▶ [React] 04. 리액트 디자인 패턴 (Props Getters Pattern)

 

 

 

 

이번 게시글은 5가지 리액트 디자인 패턴 시리즈의 마지막인 State reducer pattern에 관한 포스팅이며.

전체 시리즈는 아래 글을 번역 및 참고하였습니다.

 

https://javascript.plainenglish.io/5-advanced-react-patterns-a6b7624267a6

 

 

 

 

🤔  리액트 디자인 패턴 (React Design Pattern)

• 여러 경우에 적용할 수 있는 재사용 가능한 컴포넌트를 만들 수 있을까?
• 사용하기 쉽고 편리한 API를 제공하는 컴포넌트를 만들 수 있을까?
• UI와 기능성의 측면에서 확장 가능한 컴포넌트를 만들 수 있을까?

 

각각의 게시글에서는 해당 패턴에 대한 간단한 설명 후, 실제 코드를 예로 들어(Counter 컴포넌트를 기반으로 함) 설명을 하도록 하겠습니다.

 

또한, 패턴이 가진 장단점을 알아보고 다음 두 가지를 평가합니다.

   - Inversion of Control(IoC): 컴포넌트 사용자에게 주어지는 유연성과 제어권

   - Implementation complexity: 사용자와 개발자에 대해 그 패턴을 구현하는 난이도

 

 

* 사용자는 컴포넌트를 이용하는 다른 개발자를 말하고, 개발자는 컴포넌트를 개발자(=독자)를 말함

---

 

 

 

🌈 State reducer pattern

이 패턴은 IoC(Inversion of Control)의 측면에서 가장 효과적인 패턴이다.

 

State reducer pattern는 사용자에게 컴포넌트 내부의 동작 방식을 변경할 수 있는 발전된 방법을 제공한다.

또한, Custom Hook Pattern과 비슷해 보이지만, 사용자가 Hook을 통해 전달된 reducer를 정의한다는 차이가 있으며, reducer는 컴포넌트 내부의 모든 동작을 오버로드한다.

 

 

 

 

1️⃣ 예제

https://github.com/alex83130/advanced-react-patterns/tree/main/src/patterns/state-reducer

 

이 예제는 State reducer 패턴과 Custom hook 패턴을 같이 사용했지만,

Compound components 패턴과 함께 사용하여 reducer를 메인 컴포넌트 Counter에 직접 전달할 수도 있다.

 

 

 

 

2️⃣ 장점

• 더 많은 제어권 부여: 복잡도가 높은 경우에도 state reducers를 사용하는 것은 사용자에게 제어권을 넘겨주는 가장 좋은 방법이다. 또한, 모든 내부 동작은 외부에서 접근할 수 있으며 오버라이드 하는 것 또한 가능하다.

 

 

 

 

3️⃣ 단점

• 구현의 복잡성: 컴포넌트 개발자와 사용자 모두에게 가장 난이도가 높은 구현 방식이다.
• 가시성 부족: reducer의 동작이 변경될 수 있기 때문에, 컴포넌트 내부 로직에 대한 이해가 필요하다.

 

 

 

 

📌 Criteria

• Inversion of Control: ★★★★
• Integration complexity: ★★★★

 

 

📘 이 패턴을 사용하는 라이브러리

• Downshift