Redux Thunk 도입을 통한 UI-비즈니스 로직 분리 및 상태 관리 최적화

1 RN Thing a Day – Day 13: Redux Thunk

Ola Abaza2026년 5월 15일3분intermediate

AI 요약

Context

Redux의 기본 Action이 Plain Object만 허용하는 제약으로 인해 비동기 로직을 Component 내부에 구현하는 구조적 한계 발생. 이로 인한 UI 레이어의 비대화와 비즈니스 로직의 중복 및 테스트 가능성 저하 문제 직면.

Action Creator가 함수를 반환하도록 설계하여 Redux Store와 비동기 작업 간의 Bridge 역할 수행
Component에서 비즈니스 로직을 제거하고 dispatch를 통한 요청 중심의 구조로 변경하여 UI-로직 결합도 해소
Redux Toolkit의 createAsyncThunk를 도입하여 pending, fulfilled, rejected 상태를 자동 생성하는 표준화된 파이프라인 구축
API 호출을 담당하는 Service Layer와 비동기 상태 변화를 관리하는 Thunk Layer를 분리한 계층형 아키텍처 적용
Global State에 영향을 주는 캐싱, 조건부 페칭, 재시도 로직을 Thunk 레이어에서 중앙 집중식으로 관리

실천 포인트

1. Component 내에 await/async 기반의 API 호출 로직이 포함되어 있는지 확인

2. 비동기 상태(Loading, Error) 처리가 여러 컴포넌트에서 중복 구현되었는지 검토

3. createAsyncThunk를 활용해 비동기 라이프사이클(Pending/Fulfilled/Rejected)을 Slice 레벨에서 관리하는지 체크

4. API 호출 함수(Service)와 상태 업데이트 로직(Thunk)이 물리적으로 분리되어 있는지 확인

태그