📌
Redux란 중앙 state 관리소를 사용할 수 있게 도와주는 상태 관리 패키지(라이브러리).
여러 컴포넌트에서 사용하는 state를 한 곳에서 관리하기 위한 도구.
중앙에서 state를 관리하는 아이디어는 효율적. 하지만 직접 구현하기에는 난이도가 있음. 그래서 Redux 같은 라이브러리의 도움을 받음.
프론트엔드 개발자들은 Redux를 전역 상태 관리 라이브러리라고 부름.
전역상태 즉, Global State를 관리하기 위한 도구이기 때문.
◼ Redux가 필요한 이유
useState의 한계
컴포넌트에서 생성한 state를 다른 컴포넌트로 보낼때, Props를 통해 부모 컴포넌트에서 자식 컴포넌트로 그 값을 보내줌. 근데 Props로 State를 공유하는 방법에는 여러 불편한 점이 있음.
- state 공유를 위해 반드시 부모-자식 관계 필요
- 조부모 → 부모 → 손자 구조의 props drilling 발생
(중간 컴포넌트에서 불필요한 props 전달 발생) - 자식 컴포넌트에서 부모 컴포넌트로 값 전달 불가
이러한 문제를 해결하기 위한 도구가 Redux.
Redux 사용 시
- 부모-자식 관계 불필요
- 중간 컴포넌트 경유 불필요
- 자식 컴포넌트에서 만든 State를 부모 컴포넌트에서도 사용가능
(어디서든 state 접근 가능)
◼ Local state와 Global state
Local state(지역상태)
- 컴포넌트 내부에서 useState로 생성한 state
- 한정된 범위에서만 사용
- 컴포넌트에 종속됨
Global state(전역상태)
- Global state는 컴포넌트에서 생성되지 않음.
중앙 state 관리소에서 State 생성. - 위치와 상관없이 접근 가능
- 특정 컴포넌트에 종속되어 있지 않음
◼ Context API 대신 Redux를 사용하는 이유
Context API는 복잡하지 않은 상태관리에 적합.
대규모일땐 Context API만으로는 다음과 같은 한계가 있어 Redux를 사용하는 것이 더 효과적.
1. 성능 최적화
- Context API는 Provider 하위 모든 컴포넌트의 리렌더링 가능성 있음.
상태가 변경될 때마다 불필요한 렌더링 발생, 복잡한 최적화 필요. - Redux는 상태변경시 필요한 컴포넌트만 선택적 업데이트 가능. 성능 관리 용이
2. 상태 로직의 중앙화와 일관성
- Redux는 모든 상태를 하나의 저장소(store)에 관리. 이로 인해 일관성 있고 예측 가능한 상태 변경이 가능.
- 모든 상태 변경 로직이 리듀서(reducers)에 의해 처리되기 때문에 디버깅과 테스팅이 용이.
3. 미들웨어와 개발 도구
- Redux는 다양한 미들웨어를 지원하여 비동기 작업, 로깅, 상태 변경에 대한 추가 처리 등 복잡한 기능 구현 가능.
- Redux DevTools와 같은 개발 도구를 통해 상태 변화를 시각적으로 모니터링하고 이전 상태로 롤백하는 등의 기능을 제공.
