Redux Thunk를 이용한 웹 애플리케이션 대용량 파일 업로드 예제

18 Oct 2023

redux

이 예제는 Redux Thunk를 사용하여 웹 애플리케이션에서 대용량 파일 업로드를 처리하는 방법을 보여줍니다.

Step 1: Redux Thunk 설치

첫 번째로, Redux Thunk를 설치해야 합니다. Redux Thunk는 Redux의 미들웨어로써, 비동기 작업을 처리하기 위한 기능을 제공합니다.

npm install redux-thunk

Step 2: Redux Thunk 설정

Redux Thunk를 사용하기 위해 Redux store를 구성해야 합니다. 이를 위해서는 applyMiddleware 함수를 사용하여 Thunk 미들웨어를 등록해야 합니다.

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

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

export default store;

Step 3: 액션 생성자 함수 작성

Redux Thunk를 사용하면, 액션 생성자 함수에서 비동기 작업을 처리할 수 있습니다. 대용량 파일 업로드를 위한 액션 생성자 함수를 작성해 보겠습니다.

export const uploadFile = (file) => {
  return (dispatch) => {
    dispatch({ type: 'UPLOAD_START' });

    // 파일을 서버로 전송하는 비동기 작업
    // 예를 들어, axios 라이브러리를 사용하여 파일 업로드 요청을 보낼 수 있습니다.

    axios.post('/upload', file)
      .then((response) => {
        dispatch({ type: 'UPLOAD_SUCCESS', payload: response.data });
      })
      .catch((error) => {
        dispatch({ type: 'UPLOAD_FAILURE', payload: error.message });
      });
  };
};

위의 예제 코드에서는 ‘UPLOAD_START’, ‘UPLOAD_SUCCESS’, ‘UPLOAD_FAILURE’라는 세 가지 액션을 디스패치합니다. 업로드 시작 시 ‘UPLOAD_START’ 액션을 디스패치하여 UI를 업데이트하고, 성공 또는 실패 시 해당 액션을 디스패치하여 상태를 업데이트합니다.

Step 4: 컴포넌트에서 액션 디스패치

이제 업로드 기능을 사용하는 컴포넌트에서 액션을 디스패치하여 대용량 파일 업로드를 시작할 수 있습니다.

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { uploadFile } from '../actions';

const FileUploadComponent = () => {
  const dispatch = useDispatch();
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };

  const handleUpload = () => {
    dispatch(uploadFile(selectedFile));
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>Upload</button>
    </div>
  );
};

export default FileUploadComponent;

위의 예제 코드에서는 파일 선택을 처리하는 함수 handleFileChange과 업로드 버튼 클릭을 처리하는 함수 handleUpload을 정의합니다. handleUpload 함수에서 dispatch 함수를 사용하여 uploadFile 액션을 디스패치합니다.

이제 Redux Thunk를 사용하여 대용량 파일 업로드를 처리하는 웹 애플리케이션을 구현할 수 있습니다.

결론

Redux Thunk를 사용하면 Redux 애플리케이션에서 비동기 작업을 처리할 수 있습니다. 이 예제에서는 대용량 파일 업로드를 처리할 때 Redux Thunk를 사용하는 방법을 알아보았습니다. Redux Thunk를 사용하면 액션 생성자 함수에서 비동기 작업을 처리할 수 있으므로, 웹 애플리케이션에서 고성능의 대용량 파일 업로드를 구현할 수 있습니다.

참고 링크: Redux Thunk GitHub 페이지