React · Redux

Redux를 이벤트 로그처럼 읽기

Redux는 action으로 상태 변경 의도를 기록하고 reducer가 예측 가능한 다음 상태를 계산하는 구조다.

01

상태 모델

여러 화면이 공유하고 추적이 필요한 원본 상태를 slice로 나눈다.

02

액션 발생

사용자 행동이나 요청 결과가 action 또는 thunk로 표현된다.

03

전이 처리

reducer가 불변성을 유지하며 상태를 업데이트한다.

04

구독 렌더

selector 결과가 바뀐 컴포넌트만 새 상태를 받아 렌더된다.

Slice
도메인 상태 묶음 cart, auth, preferences처럼 변경 이유가 가까운 값
모든 UI 상태를 넣지 않음
Action
사건 기록 cart/itemAdded처럼 일어난 일을 이름 붙임
setter 이름보다 추적성 좋음
Reducer
순수 전이 상태 변경 규칙을 한곳에서 처리
비동기와 side effect 없음
Selector
읽기 경계 컴포넌트가 필요한 파생값을 계산
memoization 가능

도입 이유 · 불변성 · 비동기 점검

도입 이유 Context와 local state로 충분한 문제에 Redux를 붙이지 않는다.
불변성 상태 업데이트가 참조 변경으로 드러난다.
비동기 API 요청은 middleware/thunk에서 처리하고 reducer는 순수하게 둔다.
선택자 컴포넌트가 store 전체를 읽어 불필요하게 렌더되지 않는다.