ProductList
상품 배열을 순회하며 카드 목록을 만듭니다.
React · cart
장바구니 상태 공유 구조
상품 카드에서 발생한 액션이 reducer를 지나 장바구니 목록과 요약에 동시에 반영됩니다.
컴포넌트 책임 분리
contextProductItem
ADD_ITEM 액션을 dispatch합니다.
cartReducer
수량 증가와 삭제 규칙을 한곳에 둡니다.
CartItem
개별 항목의 수량 변경을 표시합니다.
CartSummary
총액과 결제 전 요약을 계산합니다.
상품 선택
→
dispatch
→
reducer
→
context state
→
cart UI
장바구니 상태 공유 구조 정리
Context는 값을 전역으로 퍼뜨리는 장치이고, reducer는 변경 규칙을 예측 가능하게 만드는 장치입니다.