앞서 1장에서 React의 Context를 활용해 만든 계산기와 투두리스트 프로젝트를 Redux를 활용하여 구현해 보겠습니다. 먼저 새로운 리액트 프로젝트를 설정하고 준비해 보겠습니다.
임의의 이름으로 React 프로젝트 생성 및 의존성 설치를 진행합니다.
npx create-react-app calc-todo
생성한 프로젝트 디렉터리로 이동 후, Redux를 사용하기 위한 패키지를 설치합니다.
cd calc-todo
npm install redux react-redux
Redux를 사용한 프로젝트 개발은 Action(액션)을 정의하여 Reducer(리듀서)를 작성하고, 리듀서를 통해 Store(스토어)를 만든 후 React 컴포넌트들에 연결하여 상태를 사용하고 업데이트하는 과정을 거치게 됩니다. 이러한 여러 요소를 작성하기 위해서는 먼저 파일 구조를 선택해야 합니다.
일반적인 파일 구조로는 액션, 리듀서, 스토어, 컴포넌트를 '역할'에 따라 분리하는 구조입니다.
이 구조는 역할별로 모듈화가 되어 있어 분리는 편리하지만, 새로운 액션을 하나 만들 때마다 최소 세 개의 파일을 수정해야하고 프로젝트의 규모가 커진다면 한 기능을 수정할 때마다 각각의 경로에 있는 여러 개의 파일에 매번 접근해야 하는 것이 비효율적입니다.
위와 같은 방법 대신 '기능(도메인)'별로 분리는 하되, 한 파일에 액션 타입과 액션 생성 함수, 리듀서 함수를 몰아서 작성하는 방식이 있습니다. 이는 Ducks 패턴이라고 부르기도 합니다.
이 구조는 첫 번째 방식에서의 비효율성 문제를 해결해 주어 현재 많은 개발자들이 선호하는 방식으로, 기능의 변경이나 추가가 한 파일에 대한 수정만으로 가능하므로 유지보수가 수월합니다.
위의 두 가지 패턴이 가장 많이 사용되는 방식이긴 하지만, 이 외에도 본인만의 방식으로 구조를 설정해도 무방합니다. 이번 장에서는 두 번째 Ducks 패턴을 사용해 구현해 보겠습니다.