002 Redux 공부 : Counter

Redux는 Context API가 개선되기 전에 프로젝트에서 글로벌 상태 관리 용도로 많이 사용되어 왔지만, 요즘에는 글로벌 상태 관리 용도로 사용할 것이라면 Context API와 useReducer Hook으로 충분히 가능하다고 한다. 리덕스는 프로젝트가 크고, 성능을 최적화하거나 개발자의 경험과 선호도에 따라서 사용한다고 하는데... 일단 상태관리 도구에 대해서 배우고, Redux, Recoil, Context API에서 더 정감이 가는 걸 더 공부해 보려 한다.

 

🤙 리덕스 규칙

1.  단일 스토어 (Single Store) : Redux 애플리케이션은 하나의 중앙 스토어만 사용해야 한다. 이 스토어에 애플리케이션의 모든 상태가 중앙 집중식으로 저장된다. 
2. 읽기 전용 상태 (Read-Only State) : Redux에서 상태는 불변성을 유지해야 한다. 즉, 기존 상태를 직접 수정하거나 변형해서는 안된다. 대신 새로운 상태 객체를 생성하여 변경해야 한다. 이는 상태의 불변성을 유지하고 상태 변경을 추적하기 쉽게 만든다.
3. 순수한 리듀서 (Pure Reducers) : Redux 리듀서함수는 순수 함수여야 한다. 순사 함수는 동일한 입력에 대해 항상 동일한 출력을 반환하고, 부작용이 없는 함수를 의미한다. Redux 리듀서는 이전 상태와 액션을 인자로 받아서 새로운 상태를 반환하는데 부작용을 일으키는 작업은 리듀서 내에서 수행해서는 안된다.

 

👊 리덕스 사용하기 전 준비

새로운 프로젝트를 생성한 후

npx create-react-app redux-study

cra보다는 vite를 쓰지만 공부용이라서 그냥 cra로 했다.

 

redux 라이브러리를 설치한다.

yarn add redux react-redux​

나는 yarn을 쓰기에 이렇게 했지만 npm은 npm install redux react-redux를 사용하면 된다.

 

👊 리덕스 모듈 : Counter 만들기

👉🏻 리덕스 모듈 : 액션 타입, 액션 생성함수, 리듀서가 들어있는 자바 스크립트 파일

👉🏻 리덕스를 사용하기 위해 모듈 안에 들어있는 항목들은 각각 다른 파일에 저장할 수도 있고 하나의 파일에 몰아서 작성할 수도 있다.

 

🌀 구조

 

1. 액션 타입, 액션생성자, 리듀서 설정

👉🏻 'src' 폴더 내에 'modules' 폴더를 생성하고, 그 안에 'counter.js' 파일을 생성한다.

src/modules/counter.js

 

2. 프레젠테이션 컴포넌트 만들기

👉🏻 프레젠테이셔널 컴포넌트란?

리덕스 스토어에 직접적으로 접근하지 않고 필요한 값 또는 함수를 props로만 받아와서 사용하는 컴포넌트

👉🏻 'src' 폴더 내에 'components' 폴더를 생성하고, 그 안에 'Counter.js' 파일을 생성한다.

src/components/Counter.js

여기서 useState를 쓴 이유는 input창에 아무것도 입력이 안 됐을 때 button을 누르면 NAN이 나타나서,

useState를 이용해 input창에 아무것도 입력이 안되어있을 때에는 button을 사용 못하게 처리해 놓은 것일 뿐이다.

 

3. 컨테이너 컴포넌트 만들기

👉🏻 컨테이너 컴포넌트란, 리덕스 스토어의 상태를 조회하거나, 액션을 디스패치 할 수 있는 컴포넌트를 의미한다.

👉🏻 HTML 태그들을 사용하지 않고 다른 프리젠테이셔널 컴포넌트를 불러와 사용한다.

👉🏻 'src' 폴더 내에 'containers' 폴더를 만들고 CounterContainer.js라는 파일을 만든다.

src/containers/CounterContainer.js

 

4. Redux 스토어 설정 및 루트 컴포넌트에 스토어 연동

src/index.js

 

5. CounterContainer 컴포넌트 사용

👉🏻 루트 컴포넌트를 열어 CounterContainer 컴포넌트를 사용한다.

 

CSS를 약간 바꿔봄 github에 올릴 것이라서 링

잘 작동한다.

 

---

이전 글

2023.09.01 - [React] - 001 Redux의 개념

 

참고

Redux 01 | Basics (개념 / 3가지 규칙 / 사용 패턴)

 

6장. 리덕스 · GitBook