[React] Redux Saga: 🌀 비동기 마법사로 변신하기! 🧙‍♂️

Redux Saga 톺아보기! 🧙‍♂️

Redux Saga는 Redux에서 비동기 작업을 깔끔하고 우아하게 처리하기 위한 미들웨어예요. 이름부터 뭔가 스케일이 커 보이지 않나요? “사가(Saga)“는 연대기라는 뜻인데, 비동기 작업을 이야기처럼 잘 짜여진 흐름으로 관리하겠다! 라는 포부를 담고 있습니다. 오늘은 Redux Saga가 왜 필요한지, 어떻게 사용하는지, 그리고 어떤 매력이 있는지 다뤄볼게요. 🌟

---

⛲️ Redux Saga는 왜 필요한가요?

우리가 웹 애플리케이션을 개발하다 보면 이런 상황과 마주하게 돼요:

1. 데이터를 가져오기 위해 API 호출을 해야 한다.
2. 호출 중에 로딩 상태를 보여주고, 에러가 나면 메시지도 띄워야 한다.
3. 요청이 끝나면 성공 여부에 따라 다른 작업을 처리해야 한다.

비동기 작업을 처리하기 위해 Redux Thunk 같은 도구도 있지만, 복잡한 비동기 흐름을 다룰 땐 코드가 점점 길어지고 엉켜버릴 수 있어요.

Redux Saga는 제너레이터 함수와 이펙트를 사용해 비동기 로직을 깔끔하게 구성할 수 있도록 도와줘요.

---

📝 Redux Saga의 핵심 개념

제너레이터 함수란?

Redux Saga의 핵심은 제너레이터 함수입니다.

제너레이터는 function*으로 선언하며, yield 키워드를 사용해 함수 실행을 잠시 멈출 수 있어요.

function* generatorExample() {
  console.log("Start");
  yield "Pause 1";
  console.log("Middle");
  yield "Pause 2";
  console.log("End");
}

 

제너레이터를 실행하면 함수가 한 단계씩 멈추며 진행됩니다. Redux Saga는 이 “멈추고 실행”의 특성을 활용해 비동기 작업을 관리합니다.

---

🛍️ Redux Saga 설치하기

먼저 패키지를 설치해야겠죠?

npm install redux-saga

---

🎡 Redux Saga 기본 사용법

Redux Saga를 제대로 활용하려면 사가(Saga)를 작성하고, 미들웨어로 등록해야 해요.

1️⃣ 사가 작성하기

import { takeEvery, put, call } from "redux-saga/effects";

// 1. 비동기 작업 함수
function* fetchDataSaga() {
  try {
    const response = yield call(fetch, "https://jsonplaceholder.typicode.com/posts");
    const data = yield response.json();
    yield put({ type: "FETCH_SUCCESS", payload: data });
  } catch (error) {
    yield put({ type: "FETCH_FAILURE", error });
  }
}

// 2. 감시자 사가
function* watchFetchData() {
  yield takeEvery("FETCH_REQUEST", fetchDataSaga);
}

export default watchFetchData;

 

 

2️⃣ 사가 미들웨어 등록하기

이제 Redux 스토어에 Redux Saga 미들웨어를 추가합니다.

import { createStore, applyMiddleware } from "redux";
import createSagaMiddleware from "redux-saga";
import rootReducer from "./reducers";
import rootSaga from "./sagas";

const sagaMiddleware = createSagaMiddleware();

const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));

// 사가 실행
sagaMiddleware.run(rootSaga);

export default store;

---

🌟 Redux Saga의 주요 이펙트

Redux Saga는 비동기 작업을 위해 다양한 이펙트(Effects)를 제공합니다. 이 이펙트는 사가 내부에서 사용하는 특별한 명령어 같은 거예요!

 

🌀 call(fn, ...args)

비동기 함수를 호출합니다. fetch나 axios 같은 비동기 함수 호출에 사용돼요.

const data = yield call(api.fetchUser, userId);

 

🌀 put(action)

Redux 스토어에 액션을 디스패치합니다.

yield put({ type: "FETCH_SUCCESS", payload: data });

 

🌀 takeEvery(actionType, saga)

특정 액션이 발생할 때마다 지정한 사가를 실행합니다.

yield takeEvery("FETCH_REQUEST", fetchDataSaga);

 

🌀 takeLatest(actionType, saga)

마지막으로 발생한 액션만 처리합니다. 이전 요청은 무시돼요.

yield takeLatest("FETCH_REQUEST", fetchDataSaga);

 

🌀 select(selector)

현재 상태를 선택(select)합니다.

const user = yield select((state) => state.user);

---

👩🏻‍💻 실전 예제: 사용자 정보 가져오기

액션 생성자

export const fetchUserRequest = () => ({ type: "FETCH_USER_REQUEST" });

 

리듀서

const initialState = {
  loading: false,
  user: null,
  error: null,
};

function userReducer(state = initialState, action) {
  switch (action.type) {
    case "FETCH_USER_REQUEST":
      return { ...state, loading: true };
    case "FETCH_USER_SUCCESS":
      return { ...state, loading: false, user: action.payload };
    case "FETCH_USER_FAILURE":
      return { ...state, loading: false, error: action.error };
    default:
      return state;
  }
}

export default userReducer;

 

사가

import { takeEvery, call, put } from "redux-saga/effects";

function* fetchUserSaga() {
  try {
    const response = yield call(fetch, "https://jsonplaceholder.typicode.com/users/1");
    const user = yield response.json();
    yield put({ type: "FETCH_USER_SUCCESS", payload: user });
  } catch (error) {
    yield put({ type: "FETCH_USER_FAILURE", error: error.message });
  }
}

function* watchFetchUser() {
  yield takeEvery("FETCH_USER_REQUEST", fetchUserSaga);
}

export default watchFetchUser;

---

🥊 Redux Saga vs Redux Thunk

Redux Saga와 Thunk는 둘 다 비동기 작업을 처리할 수 있지만, 접근 방식이 다릅니다.

특징	Redux Thunk	Redux Saga
기반	함수 기반	제너레이터 기반
복잡한 작업 처리	어려움	효율적
학습 곡선	낮음	높음
유스 케이스	간단한 비동기 로직	복잡한 비동기 흐름

---

🔖 결론

 

Redux Saga는 복잡한 비동기 작업을 관리하기 위한 강력한 도구입니다.

그 힘은 제너레이터 함수와 이펙트의 조합에서 나오죠. 처음에는 약간 헷갈릴 수도 있지만, 익숙해지면 정말 깔끔하고 유연한 코드를 작성할 수 있어요.

 

🌷전설의 개발자가 되어봅시당!🌷