리덕스는 React 생태계에서 가장 사용률이 높은 라이브러리다. React에 종속되는 라이브러리는 아니며 어떠한 자바스크립트 앱에서라도 사용될 수 있다. 리덕스를 사용하면 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리할 수 있으며 글로벌 상태 관리도 손쉽게 할 수 있다.
Redux 란?
Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너다.
Redux는 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와준다.
Context API를 사용해도 글로벌 상태 관리를 할 수 있고 상태 관리 로직을 분리할 수 있는데,
둘은 몇 가지 차이점이 있다.
1. 미들웨어
- 리덕스에는 미들웨어(Middleware)라는 개념이 존재한다. 리덕스로 상태 관리를 할 때에는 Reducer 함수를 사용한다. 리덕스의 미들웨어를 사용하면 액션 객체가 리듀서에서 처리되기 전에 우리가 원하는 작업들을 수행할 수 있다. 미들웨어는 주로 비동기 작업 을 처리할 때 많이 사용된다.
useReducer Hook에서도 외부 라이브러리를 사용하면 미들웨어를 사용할 수도 있지만 자주 사용되는 방식은 아니다.
2. 유용한 함수와, Hooks
- Context API 와 useReducer 를 사용할 때에는 Context 도 새로 만들고, Context 의 Provider 설정도 하고 각 Context 를 편하게 사용하기 위해 전용 커스텀 Hook 을 따로 만들어서 사용했지만, 리덕스에서는 이와 비슷한 작업을 편리하게 해줄 수 있는 여러 기능들이 존재한다.
connect함수를 사용하면 리덕스의 상태 또는 액션 생성 함수를 컴포넌트의 props 로 받아올 수 있으며, useSelector, useDispatch, useStore 과 같은 Hooks를 사용하면 손쉽게 상태를 조회하거나 액션을 디스패치 할 수도 있다.
connect함수와useSelector함수에는 내부적으로 최적화가 잘 이루어져 있어서 실제 상태가 바뀔 때만 컴포넌트가 리렌더링 된다. 반면에 Context API를 사용할 때에는 그러한 최적화가 자동으로 이루어져 있지 않기 때문에 Context 가 지니고 있는 상태가 바뀌면 해당 Context 의 Provider 내부 컴포넌트들이 모두 리렌더링 된다.
3. 하나의 커다란 상태
- Context API 를 사용해서 글로벌 상태를 관리할 때에는 일반적으로 기능별로 Context를 만들어서 사용하는 것이 일반적이다.
반면 리덕스에서는 모든 글로벌 상태를 하나의 커다란 상태 객체에 넣어서 사용하는 것이 필수 이다. 때문에 매번 Context를 새로 만드는 수고로움을 덜 수 있다.
Redux는 언제 써야 할까?
React에서 Redux를 사용하는 경우는 아래 두 가지 경우가 대부분이다.
- 전역 상태 관리
- 여러 컴포넌트에 걸쳐 있는 변화
- 멀리 떨어진 컴포넌트 간의 통신- Props Drilling을 피하기 위해서
- React는 state, props가 변화할 경우 해당 컴포넌트를 re-render
- props를 통해 여러 번 전달되는 데이터가 전달되는 경우 실제 변화가 적용되어야 하는 컴포넌트뿐만 아니라, 전달 경로에 있는 컴포넌트들도 re-render 됨
프로젝트에서 리덕스를 써야 할지 말아야 하지 고민 할 때에는 다음 사항들을 고려해보자.
- 프로젝트의 규모가 큰가? - Yes : 리덕스
- No : Context API- 비동기 작업을 자주 하게 되는가? - Yes : 리덕스
- No : Context API- 리덕스를 배워보니까 사용하는게 편한가? - Yes : 리덕스
- No : Context API 또는 MobX
장단점 정리
-
장점
1 ) 단방향 모델링이다. action을 dispatch 할 때마다 기록이 남아 에러를 찾기 쉽다.
2 ) 스토어(Store)라는 이름의 전역 자바스크립트 변수를 통해 상태를 한곳에서 관리하는데, 이를 중앙화라고 한다. 전역 상태를 관리할 때 굉장히 효과적이다.
3 ) Redux는 상태를 읽기 전용으로 취급한다. 상태가 읽기 전용이므로, 이전 상태로 돌아가기 위해서는 그저 이전 상태를 현재 상태에 덮어쓰기만 하면 된다. -
단점
1 ) 아주 작은 기능이어도 리덕스로 구현하는 순간 몇 개의 파일(액션 등)들을 필수로 만들어야 하기 때문에 코드량이 늘어난다.
2 ) 타임머신 기능을 사용하려면 불변성 개념을 지켜야 사용할 수 있으므로 매번 state라는 객체를 만들어줘야 한다.
3 ) Redux는 상태를 읽기 전용으로 취급할 뿐, 실제 읽기 전용으로 만들어주지는 않는다. 때문에 상태를 실수로 직접 변경하지 않도록 항상 주의해야 한다.
