Redux Thunk를 사용한 대용량 데이터 처리 기능 구현하기

18 Oct 2023

redux

Redux Thunk는 리덕스의 미들웨어 중 하나로, 비동기 작업을 처리하는데 사용됩니다. 이를 활용하여 대용량 데이터를 처리하는 기능을 구현해보겠습니다.

Redux Thunk란?

Redux Thunk는 리덕스 액션 생성자가 일반 객체 대신 함수를 반환할 수 있도록 해주는 미들웨어입니다. 이를 통해 비동기 작업을 처리할 수 있으며, 특히 Ajax 요청이나 데이터베이스 조회와 같은 비동기 작업을 처리하는 데에 유용합니다.

대용량 데이터 처리하기

대용량 데이터를 처리해야 할 때, 일반적인 상황에서는 데이터를 한 번에 로딩해야 하기 때문에 문제가 발생할 수 있습니다. 이때 Redux Thunk를 사용하여 비동기로 데이터를 로딩하고 처리할 수 있습니다.

액션 생성자 함수 작성하기

첫 번째로, 비동기로 데이터를 로딩하는 액션 생성자 함수를 작성해야 합니다. 이 함수에서 Ajax 요청을 보내고, 데이터를 받아와 액션 객체를 반환합니다.

import axios from 'axios';

export const fetchLargeData = () => {
  return async (dispatch) => {
    try {
      // 데이터를 로딩하는 Ajax 요청
      const response = await axios.get('/api/largeData');
      const data = response.data;

      // 액션 객체 생성 및 반환
      dispatch({ type: 'LOAD_LARGE_DATA_SUCCESS', payload: data });
    } catch (error) {
      // 오류 발생 시 에러 처리
      dispatch({ type: 'LOAD_LARGE_DATA_FAILURE', payload: error.message });
    }
  };
};

리듀서 함수 작성하기

두 번째로, 데이터를 처리하는 리듀서 함수를 작성해야 합니다. 이 함수에서 액션 객체를 받아와 상태를 업데이트합니다.

const initialState = {
  largeData: [],
  loading: false,
  error: null,
};

const largeDataReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'LOAD_LARGE_DATA_SUCCESS':
      return {
        ...state,
        largeData: action.payload,
        loading: false,
        error: null,
      };
    case 'LOAD_LARGE_DATA_FAILURE':
      return {
        ...state,
        loading: false,
        error: action.payload,
      };
    default:
      return state;
  }
};

컴포넌트에서 데이터 로딩하기

마지막으로, 컴포넌트에서 비동기로 데이터를 로딩하는 작업을 처리해야 합니다. 이를 위해서 react-redux의 connect 함수와 액션 생성자 함수를 사용하여 데이터를 로딩합니다.

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { fetchLargeData } from '../actions';

const LargeDataComponent = ({ largeData, loading, error, fetchLargeData }) => {
  useEffect(() => {
    fetchLargeData();
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      {largeData.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

const mapStateToProps = (state) => ({
  largeData: state.largeData,
  loading: state.loading,
  error: state.error,
});

export default connect(mapStateToProps, { fetchLargeData })(LargeDataComponent);

결론

Redux Thunk를 사용하면 비동기 작업을 처리하는 데에 편리한 기능을 제공합니다. 대용량 데이터를 처리해야 할 때는 Redux Thunk를 활용하여 비동기 작업을 수행하고, 데이터를 처리하는 리듀서 함수를 작성하면 됩니다. 이를 통해 코드의 유지보수성과 가독성을 높일 수 있습니다.

더 자세한 정보와 예제 코드는 Redux 공식 문서를 참고하시면 도움이 될 것입니다.