5장. 주소록에 Redux 끼얹기

이번 장에서는 이전에 우리가 만들었었던 주소록 프로젝트에 Redux 를 적용해보겠습니다. 기존의 코드에선 프로젝트의 모든 로직을 App 컴포넌트에서 관리했었습니다. 사실상, 이 프로젝트는 소규모 프로젝트이기 때문에 App 컴포넌트에서 관리하는것만으로도 충분하긴 합니다만, 이를 각 기능마다 분리해준다면 훨씬 코드가 간결해지고, 유지보수를 하는것도 더욱 쉬워집니다.

현재 App.js 의 코드의 길이가 320줄인데요, 이 안의 모든 로직을 분리시키고, 46줄 정도로 분리를 시켜보도록 하겠습니다.

이번 실습에서는, 지금까지 우리가 배운것들을 모두 응용해보겠습니다. 이 실습을 마치고나면 리덕스가 훨씬 친숙하게 느껴질거에요.

프로젝트 클론하기

이전에 만든 프로젝트 디렉토리에서 이번 튜토리얼을 진행하거나, git을 통하여 프로젝트를 clone 하세요.

git clone https://github.com/vlpt-playground/react-contact.git

의존 모듈 설치하기

리덕스를 적용하기 위하여 필요한 패키지들을 설치하겠습니다.

yarn add redux redux-actions react-redux immutable react-immutable-proptypes

react-immutable-proptypes 은 immutable 에 호환되는 propTypes 입니다.

파일구조 설정하기

src 디렉토리에 다음 디렉토리를 생성하세요:

• containers
• modules

준비가 완료되었으니 본격적으로 시작해봅시다!

앞으로 작성할 코드는 Github 에서 열람 할 수 있습니다.