Web Study
리덕스 사용을 위한.. useReducer 개념
쿠리의일상
2023. 4. 7. 23:59
컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시키는 기능
reducer
현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수를 지칭
function reducer(state, action) {
// 새로운 상태를 만드는 로직
// const nextState = ...
return nextState;
}
리듀서에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태가 된다.
- action 은 업데이트를 위한 정보
- type 은 객체 형식이지만 정해진 규칙은 없음 - 관습상 대문자와 _로 구성
useReducer
const [state, dispatch] = useReducer(reducer, initialState);
state 는 컴포넌트에서 사용할 수 있는 상태
dispatch 는 액션을 발생시키는 함수 ---> dispatch({ type : '~~~' }) 처럼 사용
useReducer() 의 첫번째 파라미터는 reducer 함수이고 두번째 파라미터는 초기 state 값이다.