1-1. 작업환경 설정

create-react-app을 통한 프로젝트 생성

create-react-app 도구를 이용하여 프로젝트를 생성하세요.

create-react-app redux-counter

그 다음, redux-counter 디렉토리 내부로 들어가서, redux 와 react-redux 를 yarn 을 통하여 설치하세요.

yarn add redux react-redux

react-redux 는 redux를 컴포넌트 상에서 더 간편하게 사용 할 수 있게 해 주는 라이브러리입니다. 이걸 사용하면, 컴포넌트에서 store 를 props 으로 받아오거나, subscribe 를 직접 할 필요가 없습니다.

그 다음엔, 해당 폴더를 에디터로 열어주세요.

프로젝트 초기화

다음 파일들을 제거하세요:

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

디렉토리 생성

src 디렉토리 내부에 다음과 같은 디렉토리를 만들어주세요.

• actions: 액션타입, 액션생성자 파일이 저장됩니
• components: 뷰만을 담당하는 presentational 컴포넌트들이 저장됩니다
• containers: store 에 접근이 닿는 container 컴포넌트들이 저장됩니다
• reducers: 스토어의 기본상태와, 상태의 업데이트를 담당하는 리듀서 파일들이 저장됩니다
• utils: 일부 컴포넌트들에서 공용되는 파일이 저장됩니다.

위 presentational 과 container 컴포넌트, 조금 낯설수도 있습니다. 하지만 걱정마세요! 다음 섹션에서 알아볼거니까요.