💡 Redux가 필요한 이유
useState를 통해 컴포넌트에서 생성한 state를 다른 컴포넌트로 보내고자 할 때 Props를 통해서 부모 컴포넌트에서 자식 컴포넌트로 그 값을 보내준다. 하지만 props로 state를 공유하는 방법에는 불편함 점 존재한다.
💡 Redux란?
✅ 리덕스는 전역 상태 관리 라이브러리이다.
✅ 리덕스는 중앙 state 관리소를 가지고 있으며, 모든 state는 이곳에서 생성된다.
💡 폴더/파일 경로
redux: 리덕스 관련 코드를 모두 몰아넣음
config: 리덕스 설정 관련 파일 전부
configStore.js: 중앙 state 관리소 -> 설정 코드
modules: state의 그룹! ex) Todolist -> todos.js
💡 Redux 기본 용어
리덕스의 기본 용어에 대해서 알아보자.
Store
스토어는 컴포넌트의 상태를 관리하는 저장소다. 하나의 프로젝트는 하나의 스토어만 가질 수 있다.
Action
스토어의 상태를 변경하기 위해서는, 액션을 생성해야한다. 액션은 객체이며, 반드시 type을 가져야 한다. 액션 객체는 액션생성함수에 의해서 만들어진다.
Reducer
리듀서는 현재 상태와 액션 객체를 받아 새로운 상태를 리턴하는 함수다.
Dispatch
디스패치는 스토어의 내장 함수 중 하나이며, 액션 객체를 넘겨줘 상태를 업데이트 시켜주는 역할을 한다.
(UI 컴포넌트에서 어떤 action을 가지고 store로 던져주는 역할.)
즉, 중앙 데이터 관리소에 이 데이터를 어떻게 해줘! 라고 action을 요청하는, 던져주는 보내주는 놈이 바로 dispatch다!
action 객체 안에 있는 type에 따라서 reducer가 state를 제어하는 것이다.
Subscribe
스토어의 내장 함수 중 하나로, 리듀서가 호출될 때 서브스크라이브된 함수 및 객체를 호출한다.
//const [number, setNumber] = useState(0)과 같은 뜻이다.
const initialState = {
number: 0,
}
//리듀서: 'state에 변화를 일으키는' 함수
//(1) state를 action의 type에 따라 변경하는 함수
//input : state와 action
const counter = (state = initialState, action) => {
switch (action.type) {
default:
return state;
}
}💡 action creator : action value를 return하는 함수
💡 input : state와 action
💡 action 객체 : action type을 payload만큼 처리하는 것이다.
💡 payload : 전달되는 어떠한 실체!
ex) payload가 3이다. plus라는 타입이 들어왔을때 3만큼을 action type(플러스)해라.
action 객체가 활용되는 방법
✳️ action 객체는 type과 payload가 있다.
✳️ action 객체는 payload만큼 type에 맞게 처리한다.
✳️ action 객체를 store로 dispatch가 던진다.
