Counter 프로젝트에 Redux를 적용해봅시다.
먼저 필요한 라이브러리를 설치해봅시다. 이 프로젝트에서 사용할 라이브러리는 아래와 같습니다.
위에서부터 2번째까지의 라이브러리는 단순히 리액트에서 Redux를 사용할 수 있게 해주는 라이브러리이므로 설명은 건너뛰겠습니다. 나머지 라이브러리 2개는 Redux를 더 쉽게 사용해주는 라이브러리입니다. 먼저 redux-actions는 액션 생성자와 리듀서 함수를 더 쉽게 만들어주는 라이브러리이고, immer는 스토어의 불변성 관리를 위해 사용하는 라이브러리입니다. State와 마찬가지로 Redux에서 불변성을 지키지 않는다면 컴포넌트 리렌더링을 보장받지 못하고, 최적화를 할 수 없기 때문에 꼭 불변성을 보장해줘야 합니다. immer 라이브러리를 사용한 리덕스 함수 작성 및 redux-actions 라이브러리의 활용은 Counter에 Redux 적용하기 (3) 페이지에서 알아볼 예정입니다.
터미널에서 프로젝트로 위치를 이동한 다음 아래와 같이 커맨드를 입력해주세요.
yarn add redux react-redux redux-actions immer
그런 다음 프로젝트에 redux 관련 파일을 추가하겠습니다. src 폴더 안에 store 폴더를 만들어주시고 그 폴더에서 index.js, reducer.js 파일을 만들어주세요. 아래와 같이 프로젝트 구조를 맞춰주세요.
[Counter]