리덕스는 React 생태계에서 가장 사용률이 높은 라이브러리다. React에 종속되는 라이브러리는 아니며 어떠한 자바스크립트 앱에서라도 사용될 수 있다. 리덕스를 사용하면 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리할 수 있으며 글로벌 상태 관리도 손쉽게 할 수 있다.
Redux 란?
Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너다.
Redux는 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와준다.
Context API를 사용해도 글로벌 상태 관리를 할 수 있고 상태 관리 로직을 분리할 수 있는데,
둘은 몇 가지 차이점이 있다.
connect
함수를 사용하면 리덕스의 상태 또는 액션 생성 함수를 컴포넌트의 props 로 받아올 수 있으며, useSelector, useDispatch, useStore 과 같은 Hooks를 사용하면 손쉽게 상태를 조회하거나 액션을 디스패치 할 수도 있다.connect
함수와 useSelector
함수에는 내부적으로 최적화가 잘 이루어져 있어서 실제 상태가 바뀔 때만 컴포넌트가 리렌더링 된다. 반면에 Context API를 사용할 때에는 그러한 최적화가 자동으로 이루어져 있지 않기 때문에 Context 가 지니고 있는 상태가 바뀌면 해당 Context 의 Provider 내부 컴포넌트들이 모두 리렌더링 된다.
- 전역 상태 관리
- 여러 컴포넌트에 걸쳐 있는 변화
- 멀리 떨어진 컴포넌트 간의 통신- 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는 상태를 읽기 전용으로 취급할 뿐, 실제 읽기 전용으로 만들어주지는 않는다. 때문에 상태를 실수로 직접 변경하지 않도록 항상 주의해야 한다.