리액트에서 리덕스 사용하기

이번엔 리액트에서 리덕스를 사용하는 방법에 대해서 배워보겠습니다. 이 튜토리얼에서는, 제목에서 나타나 있듯이 '리덕스를 편하게 사용하기 위한 발악' 을 해볼거에요. 리덕스 매뉴얼에서도 나타나는 정석대로만 한다면, 액션을 위한 파일과 리듀서를 위한 파일이 따로따로 구분되어있습니다. 정석대로만 하는 방법을 배우고 싶으시다면 카운터 만들기 튜토리얼을 읽어보세요.

우리는 리덕스 정석에서 좀 벗어나서, 편하게 사용 할 수 있는 방식으로 바로 학습하겠습니다. 추가적으로, 우리는 상태 관리를 할 때 불변성 (Immutability) 를 유지하기 위해서 Immutable.js 를 사용하겠습니다. 만약에 Immutable.js 의 사용법을 모른다면 React ❤️ Immutable.js – 리액트의 불변함, 그리고 컴포넌트에서 Immutable.js 사용하기 포스트를 한번 쭉 읽고 와주세요.

프로젝트 클론하기

이번 실습을 진행하기 위해서, 리덕스 템플릿 프로젝트를 클론하세요.

$ git clone https://github.com/vlpt-playground/begin-redux.git

만약에 현재 직접 프로젝트를 클론 할 수 없는 상태라면 이 링크 를 눌러 직접 프로젝트를 살펴보세요.

그리고, 프로젝트의 디렉토리에서 필요한 패키지를 설치하세요.

$ yarn # 혹은 npm install

그 다음에 yarn start 를 하시면 다음과 같은 화면이 나타납니다.

우리가 앞으로 만들 프로젝트에는 두가지 프로그램이 구현되어있습니다. 하나는 숫자를 올리고 내리는 카운터이며, 두번째는 간단한 투두리스트입니다.

현재 상태 살펴보기

이 프로젝트는 현재 create-react-app 으로 만들어진 프로젝트에 다음 작업이 이뤄진 상태입니다.

0. 절대경로에서 파일을 불러 올 수 있도록 설정

우리가 파일들을 불러올때 import something from '../../../foo/something 이 아닌, src 디렉토리를 기준으로 절대경로를 입력하여 import something from 'foo/something 의 형태로 불러 올 수 있게 해줍니다.

• .env: NODE_PATH 설정
• jsconfig.json: 에디터 설정

1. 패키지 설치

리덕스를 사용하기 위하여 다음 패키지들이 설치되어있습니다.

• redux
• react-redux
• redux-actions
• immutable

2. 불필요한 파일 제거

다음 파일들이 제거되었습니다.

• App.js
• App.css
• App.test.js
• logo.svg

3. 주요 컴포넌트 생성 및 루트 컴포넌트 생성

프로젝트에서 필요한 컴포넌트들이 만들어졌습니다.

• components/
  • App.js
  • AppTemplate.js
  • Counter.js
  • Todos.js
• containers/
  • CounterContainer.js
  • TodosContainer.js

• Root.js

  AppTemplate 의 경우 두가지 화면을 화면에 레이아웃 해주는 역할을 하고, Counter 와 Todos 는 카운터와 투두리스트의 뷰 만을 보여주는 컴포넌트입니다.

  Root 은 우리 프로젝트의 최상위 컴포넌트 입니다. CounterContainer 와 TodosContainer.js 는 현재 비어있는 컴포넌트들인데 이 컴포넌트들은 나중에 우리가 리덕스와 연동을 해 줄 컴포넌트입니다.

  리덕스와 연동된 컴포넌트를 우리는 컨테이너 컴포넌트 라고 부릅니다. 반면, 단순히 뷰 만을 보여주기 위하여 만들어진 컴포넌트는 프리젠테이셔널 컴포넌트 라고 부릅니다. 리덕스를 사용하여 만든 리액트 애플리케이션에서는 대부분 이렇게 컴포넌트를 구분합니다. 이러한 패턴은 무조건 따라야 하는 것은 아니지만, 이렇게 하면 앞으로 프로젝트를 개발 할 때 매우 편해집니다.

4. 리덕스 관련 코드를 작성 할 파일 생성

다음 파일들은 리덕스 관련 코드를 작성하기 위하여 필요한 파일들입니다.

• store
  • modules
    • counter.js
    • todo.js
    • index.js
  • configure.js
  • index.js
  • actionCreators.js

이 파일들은 현재 다 비어있으며 우리가 앞으로 채워나갈것입니다.

우리는 액션과 리듀서를 기능별로 분류하여 하나의 파일에 작성하게 되는데 이를 module 이라고 부릅니다. 예를들어 카운터에 관련된 코드는 counter.js 에서 작성하고, 투두리스트에 관련된건 todo.js 에 작성하게 되죠.

그리고, configure.js 는 리덕스 스토어를 생성하는 함수를 모듈화하여 내보냅니다. 이렇게 따로 모듈화를 하는 이유는, 하나의 애플리케이션에서는 하나의 스토어밖에 없긴 하지만 예외의 케이스가 있기 때문입니다. 나중에 여러분이 서버사이드 렌더링을 하게 된다면, 서버쪽에서도 각 요청이 처리 될 때마다 스토어를 생성해주어야 하는데요, 그런 작업을 하게 될 때 이렇게 스토어를 생성하는 함수를 이렇게 모듈화 하곤 합니다.

그리고, store/index.js 에선 스토어를 생성한다음에 내보내줍니다. 이렇게 모듈화된 스토어는 브라우저쪽에서만 사용되는 스토어입니다 (서버사이드 렌더링을 하게 될 땐 아까 언급했던 configure 를 통하여 그때 그때 만듭니다). 이렇게 모듈화된 스토어는 리액트 애플리케이션을 초기설정 할 때 사용됩니다.

actionCreators.js 에서도 스토어를 불러오고, 또 각 모듈들에서 선언 했던 액션 생성함수들을 불러와서 store 의 dispatch 와 미리 바인딩 작업을 해줍니다. (이 부분은 나중에 다루겠습니다.)

프로젝트의 각 파일들을 열어가면서 각 파일들이 어떠한 역할을 하는지 한번 살펴보세요.