728x90
Design Pattern(디자인 패턴)이란?
디자인 패턴이란 기존 환경 내에서 반복적으로 일어나는 문제들을 어떻게 풀어나갈 것인가에 대한 일종의 솔루션
디자인 패턴의 종류는 다음과 같다.
React의 디자인 패턴 등장 배경부터 알아보자
- 재사용 가능한 컴포넌트
- 사용이 간단한 컴포넌트
- 확장이 용이한 컴포넌트
위 세가지를 충족하는 컴포넌트를 디자인하기 위한 노력들이 리액트 패턴이 탄생했다.
1. Compound Components Pattern (합성 컴포넌트 패턴)
- 불필요한 props drilling없이 표현적이고 선언적인 컴포넌트 형태
- 더 나은 관심사의 분리와 이해가 쉬운 API 사용
- 컴포넌트 UI를 커스터마이징하기 좋게 만들 수 있다.
장점
- API복잡도가낮다.
- 하나의 거대한 부모 컴포넌트에 모든 prop을 때려넣고 자식 컴포넌트에 꽂아주는 방법보다 각각의 prop이 각각의 서브컴포넌트에 붙어있는 방법이 좋다.
단점
- UI자유도가 크다
- 자유도가 큰 것은 예상치 못한 행동을 유발할 수 있다.
- JSX가 무겁다
2. Control Props Pattern
- 컴포넌트를 더 컨트롤 할 수 있다.
- 외부 state가 'single source of truth'로 사용됨
- 유저가 커스텀 로직을 추가 할 수 있음
장점
- 많은 통제권을준다
단점
- 사용하는 것이 복잡하다
3. Custom Hook Pattern
- 메인 로직이 custom hook으로 옮겨진다.
- 사용자가 hook을 통해 컴포넌트를 더 제어한다.
장점
- 많은 제어권을 준다
- hook과 JSX사이에 자신만의 로직을 넣을 수 있다.
단점
- 사용하는 것이 복잡하다.
라이브러리
React table
React hook form
4**. Props Getters Pattern**
- Custom Hook pattern은 컴포넌트를 더 많이 제어 할 수 있지만 로직을 생성해야하므로 컴포넌트를 통합하기는 더 어렵게 된다. Props Getters Pattern은 이를 보완한다.
- native props를 노출시키는 것이 아니라 props getters 리스트를 제공한다.
- getter는 여러 prop들을 리턴하는 함수이고 사용자가 JSX element에 링크하기 자연스럽게 네이밍 된다.
- 개인적 의견: 코드가 못생긴 느낌.. 익숙하지 않아서 일 수도 있다.
장점
- 사용하기 쉬움
- 유연하다
단점
- 잘 보이지가 않는다.
- getters를 통한 추상화는 컴포넌트를 사용하기 쉽게 만들어주지만 결국 더 불투명하고 마법처럼 만드렁준다.
- 오버라이드하기 위해서는 getters에 의해 제공된 prop 리스트와 하나가 바뀔 때 생기는 내부에서 로직 변화를 알아야만 한다.
5. State reducer pattern
- Custom Hook Pattern과 유사하고 사용자가 hook으로 전달하는 reducer를 추가로 정의한다. reducer는 컴포넌트 내부 동작을 전달한다.
- 아래 예제 코드에서는 Custom Hook pattern과 연결했지만 Compound components pattern과도 사용 가능하며 reducer를 메인 컴포넌트에 전달해주면 된다.
장점
- 많은 통제권
- 복잡한 경우게 state reducer를 사용하는 것은 유저에게 통제권을 남겨주는 최고의 방법
- 모든 내부 action들은 외부에서 접근가능하며 오버라이드 할 수 있음.
단점
- 복잡한 구현
- 가시성 부족
참조문서
https://readystory.tistory.com/114
728x90