리액트 디자인 패턴에 대한 견해
컴포넌트
하나의 기능적 단위로 재사용이 가능한 독립적 모듈을 뜻한다
컴포넌트 설계를 어떻게 할까
어떻게 하는지 항상 고민이다..
현재 하고 있는 방식
- 돌아가는 코드를 짠다
- 재사용될 코드를 분리
- 기능별 분리
- 가독성을 저해하는 요소 수정
확장 가능한 컴포넌트 설계
- Inversion of Control (IoC): 유저에게 주어지는 유연성과 제어의 정도
-Implementation Complexity: 유저와 개발자가 컴포넌트를 사용하는 난이도
컴포넌트를 생성하는 사람을 개발자, 사용하는 사람을 유저로 부른다
Compound Components Pattern
장점: API 복잡도가 낮고 유연함
단점: 너무 유연하고 코드 길이가 길어질 수 있다
IoC - 1
IC - 1
부트스트랩이 사용
Control Props Pattern
컴포넌트를 controlled component로 구성하여 제어할 수 있도록 하고 SSOT라는 데이터 제어 센터에서만 모든 데이터를 관리하고 편집할 수 있도록 구성한다
장점: 많은 통제권을 주고 직접 컴포넌트를 컨트롤 할 수 있게 된다
단점: 복잡
IoC - 2
IC - 1
Meterial UI 에서 사용
Custum Hook Pattern
메인 로직을 커스텀 훅으로 분리
유저에게 더 많은 통제권을 준다
장점: 유저에게 더 많은 제어권을 준다
단점: 사용하는 것이 복잡, 로직과 렌더링이 분리되어 있음
IoC: 2
IC: 2
React hook form 에서 사용
Props Getters Pattern
커스텀 훅 패턴이 엄청난 통제권을 주지만 그만큼 어렵다
Props Getters Pattern은 복잡도를 줄이기 위한 시도
native props를 노출하지 않고 props getter 목록을 제공
변수명 설정에 유의해야 한다
장점: 복잡한 로직이 가려져 있기 떄문에 사용이 쉽다
단점: 내부 로직 파악이 어렵다, 결국 사용 시 로직을 알아야 하는데
IoC - 3
IC - 3
React Table에서 사용
State Reducer Pattern
IoC에 대해서 만큼은 최고의 패턴
유저가 컴포넌트 내부를 제어할 수 있는 더 발전된 방법 제시
커스텀 훅 패턴과 비슷하지만 hook을 통해 전달된 reducer를 정의하여 reducer가 컴포넌트 내의 모든 action을 오버로드 한다
장점: 더 많은 통제권, 복잡한 로직에서 유저에게 통제권을 주기 위한 최고의 방법
단점: 유저와 개발자 모두에게 복잡한 패턴, reducer의 action이 변경될 수 있기 떄문에 내부 로직을 잘 알아야만 한다
IoC - 4
IC - 4
Downshift 에서 사용
