2.2.1 Redux 사용 환경 세팅하기

앞서 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 컴포넌트들에 연결하여 상태를 사용하고 업데이트하는 과정을 거치게 됩니다. 이러한 여러 요소를 작성하기 위해서는 먼저 파일 구조를 선택해야 합니다.

일반적인 파일 구조로는 액션, 리듀서, 스토어, 컴포넌트를 '역할'에 따라 분리하는 구조입니다.

https://lh7-us.googleusercontent.com/noDDsirjrwHRoh1cY91F9T952sTMOzl6saX7q8_aiMBo-u3jTFLrUzF9erLttgJ4p0Bt1m3aZeOA-atEbNW14XVgjzz_CPB532ALj41ERDJKXB3c6MhuHYiucQjn7I8xQL0N2IEDaTtyWrKS4mT46Gs

이 구조는 역할별로 모듈화가 되어 있어 분리는 편리하지만, 새로운 액션을 하나 만들 때마다 최소 세 개의 파일을 수정해야하고 프로젝트의 규모가 커진다면 한 기능을 수정할 때마다 각각의 경로에 있는 여러 개의 파일에 매번 접근해야 하는 것이 비효율적입니다.

위와 같은 방법 대신 '기능(도메인)'별로 분리는 하되, 한 파일에 액션 타입과 액션 생성 함수, 리듀서 함수를 몰아서 작성하는 방식이 있습니다. 이는 Ducks 패턴이라고 부르기도 합니다.

https://lh7-us.googleusercontent.com/rkNZiEKCRhjza6ZAPfEwHJnIW3NZt2bpuBWCSWLsRpYPUNYKNKX2PYaQ7wXk6b3mBRbWQ61eugJVLkbs5kzgrnXleopSNgqORAVhh5HlEjvoQDlVI8th8uGM2NDeXRB_jtCihsemJR__vJ5GENuX9Bo

이 구조는 첫 번째 방식에서의 비효율성 문제를 해결해 주어 현재 많은 개발자들이 선호하는 방식으로, 기능의 변경이나 추가가 한 파일에 대한 수정만으로 가능하므로 유지보수가 수월합니다.

위의 두 가지 패턴이 가장 많이 사용되는 방식이긴 하지만, 이 외에도 본인만의 방식으로 구조를 설정해도 무방합니다. 이번 장에서는 두 번째 Ducks 패턴을 사용해 구현해 보겠습니다.