11.02 - 언제 Redux를 쓸까

 

언제 Redux를 쓸까

Redux가 필요할 때

1. Redux 방식이 편하고 좋다고 생각할 때

2. 비동기 작업에 대해 많은 컨트롤이 필요할 때(단순 fetch는 react-query 등 사용 가능)

3. next.js를 사용하지 않고 서버사이드 렌더링을 해야할 때

4. Testing을 해야할 때

5. 컴포넌트가 아닌 곳에서 global state를 사용하거나 업데이트 해야할 때

...

---

Redux 대체제

Context API

- context를 수단으로 useState / useReducer를 사용하여 global state 관리

- 성능 최적화가 이뤄지지 않았음. 특정 컴포넌트가 사용하지 않는 global state가 업데이트 되어도 리렌더링 발생
  (redux는 최적화가 되어 있음)

- 위의 이유 때문에 관심사 분리가 매우 중요

- 따라서 global state가 다양해지는 경우, Context의 사용은 적합하지 않을 수 있음

Constate

- 위와 같은 Context API의 한계를 보완한 Library

- Context를 기반으로 작동하기에 Context API에서 추가로 배울 것이 따로 없음

Recoil

- Context API의 한계를 극복하고자 facebook에서 만든 전역상태 관리 Lib

- 현재 experimental 단계이지만 현업에서도 사용 가능

 

---

Selector는 아래와 같은 상황에 유용

1. state의 데이터 구조가 변경될 때

2. 컴포넌트 리렌더링 최적화를 할 때

Presentational & Container 컴포넌트는 이제 그만!

대신, 공통된 로직은 Custom Hook을 만들어 상태 관련 로직과 view를 분리하자!

간단한 API 요청은 react-query

- redux-saga 등을 쓰면 요청 시작 / 성공 / 실패에 대한 3가지 액션과 각 액션을 처리하는 로직을 따로 직접 관리해줘야 함

- 하지만 react-query를 쓰면 간단히 처리할 수 있음

그럼에도, 아래와 같은 상황에서는 redux middleware(redux-saga 등)가 필요하다

1. 요청을 연달아 여러번 했을 때, 이전 요청은 무시하고 맨 마지막 요청만 처리하도록 할 때

2. 특정 조건이 만족됐을 때 이전에 시작한 요청을 취소하는 상황

3. 특정 콜백함수를 원하는 액션이 디스패치 됐을 때 호출하도록 등록하는 상황

4. 컴포넌트 밖에서 어떤 작업을 수행할 때

테스트 코드 작성을 잘 하자

---

느낀 점

• 나중에 recoil 등이 더 발전하면 굳이 redux를 안써도 될 때가 오겠다
• selector를 적극 사용하자
• custom hook을 만들어 적용해보자
• react-query도 간단한 요청에는 사용해봐야겠다
• 현재 내가 수정한 부분이 자잘한 에러를 일으켜 골치아픈데, 테스트 코드 도입으로 해결 가능한지 검토해봐야겠다