11.23.22{코딩일기}벨로퍼트와 함께하는 모던리액트 6-4 챕터리뷰

[ 새롭게 알게된 것 ]

---

1. 리덕스를 적용하기 위해선 모듈이 필요하다

---

모듈은 액션타입, 액션 생성함수, 리듀서 항목들이 모두 들어 있는 자바스크립트 파일을 의미한다

리덕스 모듈은 다른 신체 장기들과 상호작용하는 인간의 뇌와 같다.

뇌가 다른 장기들을 거쳐서 특정 신체 장기에 뇌파신호를 보내는게 아니다. 뇌는 다이렉트로 각 장기에 액션명령을 전달하는데,

이는 리덕스가 작동하는 원리이자 장점과 동일한 원리다.

리액트 프로젝트에 리덕스를 적용할땐 해당 모듈을 만들고 아래와 같이 라이브러리를 yarn을 통해 설치해주어야 한다.

$ yarn add react-redux

---

2. Ducks 패턴을 지향해야 한다

---

고뤠Duck?

만약 액션과 리듀서가 서로 다른 파일에 정의되어 있다면 합치는 것을 지향해야 하는데,

이유는 간단하다.

redux 모듈을 구현하는데 여러개의 폴더와 파일을 액션 타입과, 생성함수, 리듀서 각각 따로 만들면

Redux store 과정 전개도

나중에 서비스가 커질 수록 더 많은 폴더와 파일을 만들어야 되는데 사실상

상태 관리가 너무 복잡해질 수 밖에 없다.

리덕스 관련 코드를 분리하는 방식은 딱히 정해져 있는게 없다고 한다.

하지만 위 상태관리 문제를 해결하는 방식으로 하나의 파일로 합치는 방법이 바로 Ducks 패턴이라는 방법이다.

Ducks는 리덕스 리듀서 번들이다.

그림출처: https://medium.com/swlh/the-good-the-bad-of-react-redux-and-why-ducks-might-be-the-solution-1567d5bdc698

---

3. 한 프로젝트에 여러개의 리듀서가 있을때 하나로 합쳐서 사용하는 것이 바로 루트리듀서이다

---

리듀서를 합치는 작업은 combineReducers라는 함수를 사용한다.

---

4. Provider의 props에 store를 넣고 App컴포넌트를 감싸면 스토어 접근 컴포넌트 확인이 가능하다

---

개발자 도구 창에서 어떤 컴포넌트가 리덕스 스토어에 접근하는지 확인 할 수 있다.

---

5. createStore()는 Redux 스토어를 생성하고 초기상태를 store에 전달하는 용도가 전부다

---

상태를 생성하는 것은 reducer가 알아서 한다.

정확히는 reducer가 애플리케이션의 상태를 객체 불변성 원칙을 지키면서 어떻게 변경될지 지정해주는 용도다.

그래서 reducer는 반드시 현재상태값을 파라미터로 받고 새로운 상태값을 반환하게된다.

---

6. Ducks 패턴을 따를 땐 액션의 이름에 접두사를 반드시 넣어야 한다

---

이유는 다른 모듈과 액션 이름이 중복되는 것을 방지하기 위함이다.

예를들어 만약 모듈명이 counter이면 아래 방식으로 접두사 '/counter'를 붙여준다.

const SET_DIFF = 'counter/SET_DIFF';

---

7. Reducer는 반드시 export default로 내보내 주는 것 잊지말자

---

그래야 store에 저장된 상태값을 최신값으로 변경해줄 수 있다.

MDN에 따르면 모든 모듈은 named export와 default export를 가질 수 있다고 한다.

참고로 퓨어 자바스크립트에서 export default는 모든 타입지정 없이 모든 표현을 내보내기가 가능하기 위해 사용된다.

---

8. Ducks 패턴 사용시 리덕스 스토어는 src디렉터리 index.js에서 생성한다

---

초기값 스토어에 할당 위해 createStore()를 사용한다.

const store = createStore(rootReducer); // 스토어를 만듭니다.

그런데 리액트 v18에선 createStore대신 configureStore를 사용할 것을 추천한다고 하니 참고하자.

---

9. 리액트 v18에선 React.StrictMode컴포넌트로 App컴포넌트를 반드시 감싸줘야 한다

---

그리고 root 컴포넌트에 render함수 파라미터에 React.StrictMode로 감싼 App컴포넌트를 파라미터로 넘겨준다.

---