[React]리듀서와 비동기의 분리 Redux , 비동기

정호·2026년 4월 12일

React

목록 보기

28/30

리덕스 설계의 황금률: 리듀서와 비동기의 분리

리듀서 내부의 금지된 규칙을 이해하고, "멍청한 백엔드"를 보완하는 프론트엔드 설계 전략을 마스터하는 단계임

키워드: Reducer Purity(리듀서의 순수성), Side Effects(부수 효과), Fat Reducer vs Lean Component, Thunk(썽크)

리듀서 안에서 fetch()를 쓰면 안 되는 이유

리덕스의 리듀서는 반드시 순수 함수(Pure Function)여야 합니다. 즉, 외부 세계를 건드리지 않고 입력값에 대해서만 결과를 내놓아야 합니다.

❖ 설계 원칙 위반:

예측 가능성 파괴: 비동기 요청은 언제 끝날지 알 수 없습니다. 리덕스는 현재 상태를 즉각적으로 파악해야 하는데, 비동기가 끼어들면 상태 추적이 불가능해집니다.
순수성 위반: 서버 데이터를 수정하는 행위는 '부수 효과'입니다. 리듀서는 오직 '상태 계산'만 해야 하며 외부 환경(서버)을 바꿔서는 안 됩니다.

리듀서는 "입력(현재 상태+액션) -> 출력(새 상태)"이 즉각적이고 명확한 '계산기' 역할만 수행해야 합니다.

전략적 선택: "멍청한 백엔드" 대응법

파이어베이스와 같이 단순히 저장만 하는 백엔드를 사용할 때는 프론트엔드가 더 똑똑해져야 합니다.

시나리오	백엔드 특징	프론트엔드(리덕스) 역할
똑똑한 백엔드	자체 로직(수량 계산 등) 있음	상품 ID만 전송 후 결과값 반영
멍청한 백엔드	시키는 대로 저장만 함	리듀서에서 모든 계산 후 전체 데이터 전송

### 데이터 동기화 프로세스

리덕스 선제 업데이트: 리듀서에서 복잡한 계산(수량, 합계)을 완벽하게 끝냄

상태 감지 (App.js): useSelector로 바뀐 상태를 감지함

서버 복사 (PUT): useEffect를 통해 최신 상태를 서버에 통째로 덮어쓰기(PUT)하여 동기화함

해결책: 썽크(Thunk)와 액션 생성자

리듀서에 넣을 수 없는 비동기 로직은 리덕스 썽크(Thunk)를 통해 우아하게 해결할 수 있습니다.

❖ 로직의 거처 선정:

리듀서(Reducer): "데이터 계산의 중심". 절대 비동기 금지.
썽크(Thunk): "비즈니스 로직의 해결사". HTTP 요청, 에러 처리 등 '지저분한' 일을 전담.
컴포넌트(Component): "화면의 전달자". 복잡한 건 몰라도 됨. 오직 dispatch만 수행 (Lean Component).

// App.js에서의 자동 동기화 예시
useEffect(() => {
  if (isInitial) { // 초기 렌더링 시 전송 방지
    isInitial = false;
    return;
  }
  
  // 리덕스 상태(cart)가 바뀔 때마다 서버에 PUT 요청
  sendCartData(cart); 
}, [cart]);