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

[ 새롭게 알게 된 것 ]

---

1. 리덕스를 사용할 땐 단 한개의 스토어만 만들어서 사용해야 한다

---

리덕스는 스토어에 original state를 갖고, 각 컴포넌트가 해당 state를 참조한다.

만약 state를 참조를 분리시켜야 할 경우, 여러개의 스토어를 사용하는 것은 가능 하지만 비권장 된다.

이유가 궁금하여 공식 문서를 찾아보니, 나와 비슷한 궁금증을 가진 사람이 많았는지

따로 FAQ로 질문 답변이 되어 있었다.

본래 Flux 패턴에선 리액트 앱을 구현 할 때 하나의 스토어만 가지도록 의도되어 있다.

이를 통해 Redux 개발자도구를 활용하면 특히 대규모 서비스일수록 디버깅이 쉬워지는 장점이 있다.

만약 스토어가 여러개이면, 여러개의 스토어가 동시에 업데이트 되는 것이 아닌 내부 동작구조에 따라

순차적으로 업데이트 되기 때문에 성능에 부하를 줄 수 도있음을 알게 되었다.

뿐만 아니라 모든 데이터 요청마다 분리된 스토어를 생성 해야하므로 SSR 구현이 어려워 질 수 있다.

보통 reducer를 최대한 활용해보고 그래도 문제가 해결이 안되면 그땐 여러 개의 스토어를 사용하면 된다고 한다.

해당 문제 예시의 경우 아래를 참조 바란다.

• Solving a performance issue caused by too frequent updates of some part of the state, when confirmed by profiling the app.
• Isolating a Redux app as a component in a bigger application, in which case you might want to create a store per root component instance.

---

2. 리덕스에서도 불변성을 유지해야 데이터 변경이 감지된다

---

리덕스도 기존 리액트와 동일하게 내부적으로 데이터 변경되는 것을 감지하기 위해 불변성 원칙이 적용된다.

리덕스는 shallow equality 검사를 통해 객체의 변화를 감지하는데, 객체에 할당된 메모리 주소값만 참조하므로

실제 객체가 새롭게 리셋되면 객체 변화를 감지 못하게 되어 데이터 변경이 감지 되지 못한다.

실재 값은 변경이 되었음에도 불구하고말이다.

그래서 리덕스도 객체의 불변성 원칙이 반드시 지켜져야 한다.

---

3. 리덕스는 순수함수여야 한다.

---

참고로 순수함수란 항상 동일한 파라미터를 받고 동일한 값을 반환하는 함수이다.

리듀서 함수들이 바로 이 순수함수이다. 이는 javascript의 reduce함수에 개념에서 가져온 함수이다.

reduce는 콜백함수 실행된 후 여러개의 값들 중 값이 하나씩만 연산되는 것이 특징이며,

객체의 불변성을 지키는 함수이다.

단, new Date()나, 랜덤숫자 생성 및 네트워크 요청의 경우등의 인풋값이 항상 동일하지 않은 문제가 발생한다.

이땐, 리듀서 함수의 바깥에서 처리해줘야 하는데, 이때 리덕스 미들웨어가 유용하게 사용됨을 알게 되었다.

---

4. Singleton 패턴으로 store 구현하는 것도 비권장된다

---

Singleton패턴이란 직접 스토어를 export하여 사용하는 패턴인데,

이는 결국 request 별로 store를 만들어야 하므로 하나가 아닌 여러개의 store를 만들어야 하는 상황에 귀결된다.

단일한 스토어 사용을 Flux패턴에서 사용하도록 권장하고 있으므로 싱글톤 패턴 또한 동일한 방법을 예측해 볼 수 있다.

---

참조: https://redux.js.org/faq/store-setup, https://blog.logrocket.com/understanding-redux-tutorial-examples/#what-redux-actions