리덕스란
리덕스는 상태를 관리해주는 리액트 전역 상태관리 라이브러리다. 지금은 Redux toolkit으로 표준화됐다.
상태를 연쇄적으로 변화시키며, 리액트하고 사용할땐 react-redux를 깔아서 함께 쓴다.
컴포넌트의 상태 변경 로직을 다른 파일로 분리해 효율적으로 관리할 수 있다.
상태관리가 왜 필요할까?
리액트의 경우 컴포넌트에서 원래는 useState 등을 사용했는데, 각 컴포넌트가 아니라 앱 전체에서 상태를 관리해야하는 경우가 많다.
그럴 때 앱 전역에서 사용되는 상태를 관리하는게 리덕스!
// 만약 todolist를 만드는데 투두와 완료, 삭제리스트를 이렇게 관리하면 한 js에서 관리할 게 너무나 많음
const state = {
todolist:[],
donelist:[]
}
그럴 때 리덕스를 사용하면 상태를 앱 최상위에서 관리하기 때문에 그 하위 컴포넌트 어디서든 상태값을 가져와 사용할 수 있다.
작동 순서
리덕스는 사용자 Action이 발생했을때, Store로 가기까지 무조건 한 방향으로 움직인다.
- dispatch 함수를 실행하면
- action이 발생한다.
- 이를 리듀서(reducer)가 전달하면
- 최종적으로 상태(state)를 바꾼다.
구성 요소
- Action: 무조건 타입을 전달한다
{type:'some text'}
- Reducer: param으로 상태와 액션을 받고 상태를 변화시키는 함수
function reducer(state, action) {
return changeState;
- Store: 앱 전체에서 사용되는 상태 저장소
- Dispatch: 액션을 발생시키는 함수 (
e.g. dispatch(action))
참고: Fastcampus '한 번에 끝내는 Node.js 웹 프로그래밍 초격차 패키지 Online' 강의
장단점
장점
- 데이터 관리하는 부분이 분리되어있어 테스트가 쉬움
- 모든 구성요소는 Store의 모든 양식 상태에 액세스 가능
단점
- Action type, selector, action 생성자, reducer 등 중복 코드가 많음