Udemy React 강의 173번 정리
왜 useReducer가 필요할까?
현재 상황 (Context + useState)
- CartContextProvider 컴포넌트 안에서 장바구니 상태를 관리 중임
- 상태는 객체 / 배열 형태
- 상태 업데이트 로직이 점점 복잡해짐
문제점
- 항상 함수형 업데이트를 써야 함
- 로직이 길어질수록 가독성이 떨어짐
- 상태 변경 규칙이 컴포넌트 안에 흩어져 있음
이런 경우에 등장하는 게 useReducer
reducer란 무엇인가?
reduce의 기본 개념 (React 이전부터 있던 개념)
여러 값을 하나의 값으로 줄이는 함수임.
대표적인 예가 JavaScript의 reduce.
const total = items.reduce((sum, item) => {
return sum + item.price * item.quantity;
}, 0);이전값 + 규칙 → 새값
이 패턴을 상태 관리에 적용한 게 useReducer임.
useReducer의 핵심
상태 변경 로직을 한 곳(reducer)에 모으자!
useReducer는 두 가지를 반환함
const [state, dispatch] = useReducer(reducer, initialState);- state : 현재 상태
- dispatch : action(행동)을 보내는 함수
useState의 setState와 다름!
직접 값을 넣는 게 아니라 action을 전달
reducer 함수의 구조
reducer는 반드시 이 형태를 가짐 :
function shoppingCartReducer(state, action) {
return newState;
}매개변수의 의미
| 매개변수 | 설명 |
| state | 항상 최신 상태 스냅샷 |
| action | dispatch로 전달한 정보 |
React가 최신 state를 보장하기 때문에 이전 상태 기반 업데이트를 자동으로 처리함. 그래서 setState(prev => ...) 이런 패턴이 필요 없는 거임.
reducer는 왜 컴포넌트 밖에다가 두는 걸까?
function shoppingCartReducer(state, action) {
return state;
}이유
- props / state에 직접 접근할 필요 없음
- 컴포넌트 리렌더링 시 재생성될 필요 없음
- 순수 함수 유지
즉, 상태 변경 규칙만 정의하는 함수이기 때문임.
지금 단계에서 이 강의가 말하고자 하는 핵심은 useReducer는 복잡한 상태 변경 로직을 구조적으로 관리하기 위한 도구라는 것.
- Context + 복잡한 state → useReducer 궁합 좋음
- 무슨 일이 일어났는지(action) 중심 사고
