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

 

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

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

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

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

 

 

 

 

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

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

 

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

 

 

 

 

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

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

 

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

 

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

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

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

 

 

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

---

 

 

 

🌈 Custom Hook Pattern

메인 로직이 커스텀 훅(Hook)으로 전달되고, 훅은 사용자가 접근할 수 있다.

또한 훅은 여러 내부 로직(States, Hnadlers)을 포함하여 컴포넌트의 제어가 쉬워지고, 사용자에게 더 많은 통제권을 준다.

 

 

 

 

1️⃣ 예제

https://github.com/alexis-regnaud/advanced-react-patterns/tree/main/src/patterns/custom-hooks

 

 

 

 

2️⃣ 장점

• 많은 제어권 부여: 사용자는 훅과 JSX 컴포넌트 사이에 로직을 추가하여 기본 컴포넌트의 동작을 바꿀 수 있다.

 

 

 

 

3️⃣ 단점

• 구현의 복잡성: 로직과 렌더링 하는 부분이 분리 되어 있기 때문에, 사용자는 로직과 랜더링 부분을 연결해 주어야 한다.  따라서, 컴포넌트를 올바르게 구현하기 위해 컴포넌트의 동작 방식에 대한 깊은 이해가 필요하다.

 

 

 

📌 Criteria

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

 

 

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

• React table
• React hook form