디자인 패턴(design pattern)이란?
소프트웨어 설계에서 공통으로 발생하는 문제에 대해 객체 간 상호관계 등을 통해 해결할 수 있도록, 자주 쓰이는 설계 방법을 정리한 것이다.
왜 사용하는가?
디자인 패턴을 고려해 개발할 경우 개발의 효율성과 유지보수성이 높아지고 프로그램의 최적화에 도움이 된다.
리액트 디자인 패턴
Compound Component?
- 컴포넌트에 (암시적으로 상태를 공유하는) 선언적 서브 컴포넌트를 제공
- 커스터마이징이 용이(유연)하고 관심사를 분리하여 이해가 쉬운 API를 갖춘 컴포넌트
- 무거운 JSX
Control Props Pattern?
- Controlled component란 component의 상태를 제어할 수 있는 컴포넌트를 의미하며 모든 데이터 요소를 한 곳에서만 제어ㆍ편집하도록 제공
- state가 컴포넌트 밖으로 드러나기 때문에 사용자는 직접적으로 컴포넌트를 제어
- 3개의 다른 위치(JSX/useState/handleChange)에서의 구현으로 복잡성 증가
Custom Hook Pattern?
- 사용자는 메인 로직과 여러 내부 로직(States, Hnadlers)을 포함한 훅(Hook)에 접근
- 훅과 JSX 사이에 로직을 추가하여 기본 컴포넌트의 동작을 바꾸는 등 사용자에게 강력한 제어권을 주지만 로직과 렌더링 하는 부분이 분리 되어 있기 때문에 구현의 복잡성이 높아져 컴포넌트를 이용하기 어렵게 한다.
Props Getters Pattern?
- props getter의 목록을 제공
- 올바른 getter를 연결하기만 하면 되므로 사용이 쉬우며 필요한 경우 유연하게 getter에 포함된 props를 재정의
- getters를 통한 추상화로 컴포넌트를 사용하기 쉽게 만들어주지만 가시성이 부족하며 오버라이드 하기 위해서 결국 내부 로직에 대한 이해 필요
State Reducer pattern?
IoC(Inversion of Control)의 측면에서 가장 효과적인 패턴!
IoC란, 제어의 역전으로 인스턴스나 객체의 제어권을 시스템이 갖게 한다. 따라서 결합도가 낮아지고 유지보수가 쉬워진다.
- Custom Hook Pattern과 비슷해 보이지만, 사용자가 Hook을 통해 전달된 reducer를 정의한다는 차이가 있으며, reducer는 컴포넌트 내부의 모든 동작을 오버로드한다.
- 복잡도가 높은 경우에도 사용자에게 제어권을 넘겨주는 가장 좋은 방법이며, 모든 내부 동작은 외부에서 접근할 수 있으며 오버라이드 하는 것 또한 가능
- reducer의 동작이 변경될 수 있기 때문에, 컴포넌트 내부 로직에 대한 이해가 필요해서 난이도가 높은 구현 방식
