[javascript] Redux-Thunk와 Redux-Saga의 차이점은?

22 Nov 2023

javascript

Redux-Thunk

Redux-Thunk는 Redux의 기본 미들웨어로, 간단하고 직관적인 방식으로 비동기 작업을 처리할 수 있습니다. Redux-Thunk는 액션 생성자에서 비동기 작업을 수행할 수 있는 함수를 반환하도록 허용합니다. 이 함수는 디스패치 메서드를 인자로 받아서 액션을 디스패치할 수 있습니다. 이렇게 액션 생성자에서 비동기 작업을 처리할 수 있기 때문에, 액션과 미들웨어 간의 관계가 간단하고 직관적입니다.

Redux-Thunk를 사용하는 코드의 예시를 살펴보겠습니다.

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

const initialState = {...};  // 초기 상태

// 리듀서 함수
function reducer(state = initialState, action) {
  switch (action.type) {
    case 'FETCH_DATA_SUCCESS':
      // 데이터를 가져와서 상태를 업데이트하는 로직
      return {...state, data: action.payload};
    case 'FETCH_DATA_ERROR':
      // 에러를 처리하는 로직
      return {...state, error: action.payload};
    default:
      return state;
  }
}

// 미들웨어 설정
const store = createStore(reducer, applyMiddleware(thunk));

Redux-Saga

Redux-Saga는 Redux-Thunk와 달리 제너레이터 함수를 사용하여 비동기 작업을 처리하는 미들웨어입니다. Redux-Saga는 액션을 모니터링하고, 특정 액션이 발생하면 관련된 비동기 작업을 시작합니다. Redux-Saga는 분리된 saga 함수들을 정의하고, 이 함수들은 액션에 따라 비동기 작업을 수행하고 상태를 업데이트합니다. Redux-Saga를 사용하면 비동기 작업의 순서를 제어하고, 에러 핸들링, 취소, 병렬 작업 등 보다 고급적인 기능을 사용할 수 있습니다.

Redux-Saga를 사용하는 코드의 예시를 살펴보겠습니다.

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import { call, put, takeEvery, all } from 'redux-saga/effects';

const initialState = {...};  // 초기 상태

// 리듀서 함수
function reducer(state = initialState, action) {
  switch (action.type) {
    case 'FETCH_DATA_SUCCESS':
      // 데이터를 가져와서 상태를 업데이트하는 로직
      return {...state, data: action.payload};
    case 'FETCH_DATA_ERROR':
      // 에러를 처리하는 로직
      return {...state, error: action.payload};
    default:
      return state;
  }
}

// 비동기 작업을 수행하는 saga 함수
function* fetchDataSaga(action) {
  try {
    const data = yield call(api.fetchData);  // 비동기 작업 호출
    yield put({ type: 'FETCH_DATA_SUCCESS', payload: data });  // 성공 액션 디스패치
  } catch (error) {
    yield put({ type: 'FETCH_DATA_ERROR', payload: error });  // 에러 액션 디스패치
  }
}

// root saga
function* rootSaga() {
  yield takeEvery('FETCH_DATA_REQUEST', fetchDataSaga);  // FETCH_DATA_REQUEST 액션 감시
}

// 미들웨어 설정
const sagaMiddleware = createSagaMiddleware();
const store = createStore(reducer, applyMiddleware(sagaMiddleware));

// saga 실행
sagaMiddleware.run(rootSaga);

결론

Redux-Thunk와 Redux-Saga는 각기 다른 방식으로 비동기 작업을 다루기 때문에 개발하고자 하는 애플리케이션의 요구사항과 개발자의 선호도에 따라 선택할 수 있습니다. Redux-Thunk는 더 간단하고 직관적인 방식이지만, Redux-Saga는 보다 고급적인 기능을 제공하여 복잡한 비동기 작업을 다룰 수 있습니다.