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

 

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

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

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

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

 

 

 

 

이번 게시글은 5가지 리액트 디자인 패턴 시리즈의 네 번째인 Props Getters Pattern에 관한 포스팅이며.

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

 

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

 

 

 

 

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

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

 

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

 

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

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

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

 

 

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

---

 

 

 

🌈 Props Getters Pattern

이전에 알아봤던 Custom hook pattern 패턴은 사용자에게 강력한 제어권을 주지만 컴포넌트를 이용하기 어렵게 만든다.

 

이러한 점을 해결하기 위해 이번에 알아볼 Props Getters 패턴은 native props를 노출하는 대신 props getter의 목록을 제공한다. Getter는 props를 반환하는 함수이며, 사용자가 쉽게 JSX 요소에 연결할 수 있도록 의미 있는 이름을 사용해야 한다.

 

 

 

 

1️⃣ 예제

https://github.com/alex83130/advanced-react-patterns/tree/main/src/patterns/props-getters

 

 

 

 

2️⃣ 장점

• 사용의 간편함: 컴포넌트를 사용하는 쉬운 방법을 제공하며, 복잡한 부분은 가려져 있다. 사용자는 올바른 getter를 그에 맞는 JSX 요소에 연결하기만 하면 된다.

 

• 유연성: 사용자는 필요한 경우 getter에 포함된 props를 재정의할 수 있다.

 

 

 

 

3️⃣ 단점

• 가시성의 부족: getters를 통한 추상화로 컴포넌트를 사용하기 쉽게 만들어주지만 내부가 보이지 않게 되어, 결국 더 불투명하게 만들어준다. 컴포넌트를 오버라이드 하기 위해서 사용자는 getters에 의해 제공된 prop 리스트와 그 중 하나가 변경될 때 내부 로직의 미치는 영향을 알아야만 한다.

 

 

 

 

📌 Criteria

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

 

 

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

• React table
• Downshift