목록 보기
리덕스 사가(Redux Saga)란 무엇인가?
프론트엔드

리덕스 사가(Redux Saga)란 무엇인가?

트렌비
트렌비
2022년 5월 25일

두줄요약

Redux의 상태 관리 원칙과 미들웨어의 부수 효과 처리 방식을 설명했습니다. Redux Saga의 제너레이터·이펙트 기반 비동기 제어 API를 정리했습니다.

구조와 흐름

  • Redux의 단일 스토어, 액션 디스패치, 순수 리듀서 기반 단방향 상태 관리
  • 미들웨어 체인을 통한 리듀서 이전의 부수 효과 처리와 상태 갱신
  • Redux Saga의 액션 감시, 이펙트 yield, 미들웨어 명령 수행 구조

선택 이유

  • API 호출, 요청 취소, 순차 호출 등 복잡한 비동기 부수 효과 전담
  • 제너레이터 기반 일시 정지·재개로 동기 코드 형태의 비동기 워크플로 표현
  • 스토어 접근과 액션 디스패치를 통한 성공·실패 상태 제어

주의할 점

  • 모든 Saga 이펙트 함수에 yield 사용 필요
  • call의 블로킹과 fork의 논블로킹 특성 구분 필요
  • takeEvery의 중복 작업 허용 여부와 takeLatest의 이전 작업 취소 특성 고려

적용해볼 점

  • createSagaMiddleware와 applyMiddleware로 Saga 미들웨어 연결 후 root Saga 실행
  • API 결과 상태 반영에 put, 최신 요청 우선 처리에 takeLatest, 상태 조회에 select 활용

다음 읽기

#React 주제를 다룬 다른 회사 글

react + typescript에 redux-saga 셋팅하기

React와 TypeScript 환경에서 Redux 모듈을 분리하고 typesafe-actions로 타입 안전성을 구성했습니다. Redux-Saga 미들웨어로 API 비동기 처리와 중복 요청 취소 흐름을 구현했습니다.

너드팩토리
너드팩토리
프론트엔드
전체 보기

댓글 0개

댓글을 작성하려면 로그인이 필요합니다.

댓글을 불러오는 중...