준비 단계: reducer 중심 구조 세팅
cart item shape, action 이름, reducer 반환 규칙을 먼저 정해 상태 변경 경로를 고정합니다.
기본 스타일링 (index.css 또는 App.css)
상품 목록, 장바구니 영역, 수량 조작 버튼이 상태 변화에 맞게 읽히도록 최소 스타일을 둡니다.
cartReducer.js (useReducer)
장바구니 상태를 관리하는 리듀서 함수를 정의합니다.
장바구니 예제는 useReducer로 상태 전이를 모으고, useContext로 여러 컴포넌트에 dispatch를 전달하며, 커스텀 훅으로 사용 지점을 단순화하는 연습입니다. 항목 추가, 제거, 수량 변경이 같은 reducer 계약을 통과하도록 구성합니다.
reducer, action, dispatch, 화면 반응을 분리해 장바구니 흐름을 확인합니다.
cart item shape, action 이름, reducer 반환 규칙을 먼저 정해 상태 변경 경로를 고정합니다.
상품 목록, 장바구니 영역, 수량 조작 버튼이 상태 변화에 맞게 읽히도록 최소 스타일을 둡니다.
장바구니 상태를 관리하는 리듀서 함수를 정의합니다.