[react] 리액트 네이티브에서의 리덕스 비동기 작업 처리

22 Dec 2023

react

리액트 네이티브 애플리케이션을 개발하다보면 네트워크 요청과 같은 비동기 작업을 처리해야 하는 경우가 많습니다. 이때 리덕스를 사용하면 상태 관리와 비동기 작업 처리를 효과적으로 할 수 있습니다. 이번 포스트에서는 리액트 네이티브 애플리케이션에서 리덕스를 이용하여 비동기 작업을 어떻게 처리하는지 살펴보겠습니다.

리덕스 미들웨어

리덕스는 미들웨어를 사용하여 액션을 디스패치한 후 리듀서에서 상태를 변경하기 전에 추가적인 작업을 수행할 수 있습니다. 이를 이용하여 네트워크 요청과 같은 비동기 작업을 처리할 수 있습니다.

가장 많이 사용되는 리덕스 미들웨어로는 Redux Thunk와 Redux Saga가 있습니다. 이 중에서 Redux Thunk는 간단하고 쉽게 사용할 수 있는데, 코드가 복잡해질수록 유지보수가 어려워질 수 있습니다. Redux Saga는 제너레이터를 이용하여 비동기 작업을 처리하기 때문에 코드의 흐름을 명확하게 파악할 수 있으며, 다양한 비동기 작업을 쉽게 처리할 수 있습니다.

Redux Thunk를 이용한 비동기 작업 처리

다음은 Redux Thunk를 이용하여 네트워크 요청을 처리하는 예제입니다.

Redux Thunk 미들웨어를 설정합니다.

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

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

비동기 작업을 수행하는 액션 생성자를 정의합니다.

export const fetchData = () => {
  return (dispatch) => {
    dispatch({ type: 'FETCH_DATA_REQUEST' });

    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data }))
      .catch(error => dispatch({ type: 'FETCH_DATA_FAILURE', payload: error }));
  };
};

Redux Saga를 이용한 비동기 작업 처리

이번에는 Redux Saga를 이용하여 네트워크 요청을 처리하는 예제를 살펴보겠습니다.

Redux Saga 미들웨어를 설정합니다.

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

const sagaMiddleware = createSagaMiddleware();
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(rootSaga);

비동기 작업을 수행하는 제너레이터 함수를 정의합니다.

import { call, put, takeEvery } from 'redux-saga/effects';
import { fetchDataSuccess, fetchDataFailure } from './actions';

function* fetchData() {
  try {
    const data = yield call(API.fetchData);
    yield put(fetchDataSuccess(data));
  } catch (error) {
    yield put(fetchDataFailure(error));
  }
}

export function* watchFetchData() {
  yield takeEvery('FETCH_DATA_REQUEST', fetchData);
}

결론

리액트 네이티브 애플리케이션에서 비동기 작업을 처리할 때, 리덕스의 미들웨어를 이용하여 Redux Thunk 또는 Redux Saga를 적절히 선택하여 사용하면 효율적으로 비동기 작업을 처리할 수 있습니다.

위에서 설명한 내용은 리액트 네이티브에서의 리덕스를 활용한 비동기 작업 처리 방법에 대한 간단한 예시이며, 실제 프로젝트에서는 더 많은 고려사항과 특정 상황에 맞는 최적의 방법을 선택해야 합니다.

참고 문헌:

Redux Thunk: https://github.com/reduxjs/redux-thunk
Redux Saga: https://redux-saga.js.org/

리액트 네이티브 개발에서 리덕스를 사용하여 비동기 작업을 처리하는 방법에 대해 간략히 살펴보았습니다. 부족한 설명으로 이해가 어려운 점이 있다면 더 많은 정보와 자료들을 참고하여 실습해보시기를 권장합니다.