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

[ 새롭게 알게된 것 ]

---

1.현존하는 리액트 상태관리 라이브러리중 가장인기 있는 것은 Redux이다

---

프로젝트 또는 서비스 규모에 따라 Redux를 사용하는 것이 좋을 수 도 혹은 필요치 않을 수 도 있다.

특히 Context API와 useReducer Hook을 사용하는 개발 방식은 Redux의 Reducer와 액션 개념과 매우 유사하다.

출처: npm trends

---

 

2.단순 글로벌 상태관리만을 위해선 Redux는 그리 필요치 않다

---

오히려 Context API만 사용해도 충분했다.

실재로 작은 규모의 프로젝트를 진행했을 때에도 처음엔 Context API만 사용해도 충분했었다.

하지만 점차 기능이 추가되고 상태관리 로직이 복잡해지자 매번 Context를 새로 만들어야 하는 번거로움이 있었고,

이는 Redux를 고려해볼만한 상황까지 이르게 되었다.

---

 

3. Redux는 미들웨어 지원 때문에 사용한다고 해도 과언이 아니다

---

Redux로 상태관리할 때 리듀서 함수를 사용하게 된다. 

이 리듀서 함수가 바로 미들웨어이다.

미들웨어는 주로 비동기 작업을 처리할 때 사용된다.

이 리듀서 함수를 사용하면 액션객체가 리듀서에서 처리되기 전에 아래와 같은 특정 작업들을 처리하기 편리하다.

• 특정 조건에 따라 액션이 무시되게 만들 수 있습니다.
• 액션을 콘솔에 출력하거나, 서버쪽에 로깅을 할 수 있습니다.
• 액션이 디스패치 됐을 때 이를 수정해서 리듀서에게 전달되도록 할 수 있습니다.
• 특정 액션이 발생했을 때 이에 기반하여 다른 액션이 발생되도록 할 수 있습니다.
• 특정 액션이 발생했을 때 특정 자바스크립트 함수를 실행시킬 수 있습니다.

---

4.Redux 전용함수 또는 Hook을 통해 손쉽게 상태를 조회 및 디스패치 할 수 있다

---

Context API와 useReducer를 사용해 Context와 Context Provider를 설정한 방식과 유사한 Hook이 있다.

바로 Redux의 connect 함수인데, 이를 통해 리덕스의 상태 또는 액션 생성 함수를 props로 받아올 수 있다.

Redux의 useSelector, useDispatch, useStroe와 같은 Hooks을 사용해 쉽게 상태조회 및 디스패치도 가능하다.

쉬운 이유는 다름아닌 connect함수와 useSelector 내부 작동 방식 때문이다.

Context API는 Context가 지니고 있는 상태가 바뀌면  하나의 Context가 바뀌면 전부 리렌더링 되는 불편함이 있다.

대신 Redux 전용 함수를 사용하면 실제 상태가 바뀔때만 리렌더링 되도록 최적화 되어 있는것이 가장 큰 강점이다.

이것이 가능한 이유는 리덕스에선 글로벌 상태를 하나의 커다란 상태 객체에 넣어 사용하는 것이 필수인 구조 때문이다.

---

5.Redux보다 MobX나 Context API가 편리한진 취향차이로 갈린다

---

결국 둘다 사용해보아야 한다.

---