Redux
- 클라이언트 전역 상태 관리 라이브러리
- 기존 리액트의 문제 해결! -> 예측가능한 상태관리, 체계적 코드 구조와 유지보수성 개선
리덕스 주요 개념
- (redux) state
: 유일한 상태 보관소
- action
: 상태 변경 방식의 정의 (상태 방식에 대해서 이름을 지어줌) - dispatch funtion
: action을 reducer 에 전달하는 역할
: reducer는 action 에서 하라는 데로 작업함 - reducer
: 여러 데이터를 하나로 줄여서 리턴(.reduce())
- redux-thunk
: 초기 redux는 비동기 action을 정상적
Redux-Toolkit
🤔 생기기 전 문제:
- Redux는 유일한 거대 상태를 기반으로 상태 관리를 하기 때문에, 상 태가 커지면 커질수록 관리에 어려움이 생겼다.
- SPA기반 FE가 개발 트렌드가 되면서, Redux가 관리해야 하는 상태 가 많아졌고, 이를 돕는 라이브러리들이 많이 생겼다.
- 문제는 라이브러리가 너무 많고 제작자도 다양하여 이를 조합하여 사 용하는 것에 많은 개발자가 어려움을 겪었다. (React 처럼..)
👉🏻 Redux 개발진은 이를 통일하여 관리하기 위해 Redux-Toolkit을 제
작
Redux-Toolkit (createSlice)
• 유일한 하나의 상태를 관리하는 컨셉은 그대로 유지하되, 상태를 Slice하여 쉽게 관리할 수 있도록 도움
• createSlice 하나에 state, action, reducer 등 대부분을 정의할 수 있게 되었음.
• 상태를 목적에 따라 적절하게 나눌 수 있게 되었음
• Redux-Toolkit (useSelector)
• 모든 상태를 한꺼번에 가져오는 것이 아니라 골라서 가져올 수 있게
됨
• 함수형 컴포넌트의 useState 처럼 사용하면 되어서 편리
