React 상태 관리 실습

장바구니 reducer action 전이 기준

장바구니는 단순 배열이 아니라 추가, 수량 변경, 삭제, 합계 계산이 같은 규칙 안에서 움직이는 상태 머신에 가깝습니다.

01

Reducer

액션으로 상태 변경 제한

수량 증가와 제거 같은 규칙을 switch 안에 모아 컴포넌트 중복을 줄입니다.

02

Context

장바구니 상태를 전역 공유

Provider는 상태와 dispatch 함수를 내려주고 컴포넌트는 필요한 액션만 호출합니다.

03

검증

회귀 테스트 시나리오 확인

같은 상품 추가, 수량 0, 삭제 후 합계처럼 깨지기 쉬운 흐름을 확인합니다.

reducer 전이 정책

  • 컴포넌트에서 직접 배열을 수정하지 않고 dispatch만 호출합니다.
  • 수량이 0이 되는 경우 삭제인지 1로 제한인지 정책을 정합니다.
  • 합계는 상태 저장보다 파생 값으로 계산하는 편이 안전합니다.

액션 역할

ADD 상품 추가 중복 시 수량 증가
UPDATE 수량 변경 최소값 검증
REMOVE 삭제 합계 재계산