Redux Toolkit을 활용한 자바스크립트 앱의 파일 업로드 처리

21 Sep 2023

redux

파일 업로드는 현대 웹 애플리케이션에서 자주 사용되는 기능 중 하나입니다. Redux Toolkit은 파일 업로드를 처리하는 데 사용할 수 있는 강력한 도구입니다. 이번 블로그 포스트에서는 Redux Toolkit을 활용하여 자바스크립트 앱에서 파일 업로드를 어떻게 처리할 수 있는지 알아보겠습니다.

Redux Toolkit 설치하기

Redux Toolkit을 사용하기 위해 먼저 설치해야 합니다. 다음 명령어를 사용해 Redux Toolkit을 프로젝트에 추가합니다.

npm install @reduxjs/toolkit

또는

yarn add @reduxjs/toolkit

파일 업로드 처리를 위한 Redux 스토어 설정

Redux Toolkit을 사용하려면 앱의 Redux 스토어를 설정해야 합니다. 먼저, configureStore 함수를 사용하여 스토어를 생성합니다. 이 함수는 Redux Toolkit의 getDefaultMiddleware 함수와 함께 사용하여 기본적인 미들웨어를 설정합니다.

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: {
    // reducers here
  },
  middleware: [...getDefaultMiddleware()],
});

다음으로, 파일 업로드를 처리하는데 필요한 액션 타입과 리듀서를 추가해야 합니다. 예를 들어, 파일 업로드 상태를 관리하는 upload 리듀서를 생성하고 UPLOAD_FILE 액션을 처리하는 코드를 작성합니다.

import { createSlice } from '@reduxjs/toolkit';

const uploadSlice = createSlice({
  name: 'upload',
  initialState: {
    file: null,
    status: 'idle',
    error: null,
  },
  reducers: {
    setFile: (state, action) => {
      state.file = action.payload;
    },
    uploadFilePending: (state) => {
      state.status = 'pending';
    },
    uploadFileSuccess: (state) => {
      state.status = 'succeeded';
    },
    uploadFileFailure: (state, action) => {
      state.status = 'failed';
      state.error = action.payload;
    },
  },
});

export const {
  setFile,
  uploadFilePending,
  uploadFileSuccess,
  uploadFileFailure,
} = uploadSlice.actions;

export default uploadSlice.reducer;

파일 업로드 컴포넌트 작성하기

이제 파일 업로드를 처리하는 컴포넌트를 작성해야 합니다. Redux Toolkit을 사용하여 앱의 상태와 액션을 관리할 수 있습니다.

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { setFile, uploadFilePending, uploadFileSuccess, uploadFileFailure } from './uploadSlice';

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

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

  const handleFileUpload = () => {
    dispatch(setFile(selectedFile));
    dispatch(uploadFilePending());

    // 파일 업로드 처리 로직을 추가합니다.
    // 예: axios 라이브러리를 사용하여 서버로 파일을 업로드하는 코드

    axios.post('/upload', selectedFile)
      .then(() => {
        dispatch(uploadFileSuccess());
      })
      .catch((error) => {
        dispatch(uploadFileFailure(error.message));
      });
  };

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

export default FileUploadComponent;

파일 업로드 상태 확인하기

파일 업로드 상태를 확인하기 위해 Redux 스토어의 상태를 구독하고, 상태 변경 시 UI를 업데이트할 수 있습니다.

import React from 'react';
import { useSelector } from 'react-redux';

const UploadStatusComponent = () => {
  const uploadStatus = useSelector((state) => state.upload.status);
  const uploadError = useSelector((state) => state.upload.error);

  return (
    <div>
      {uploadStatus === 'pending' && <p>File upload is in progress...</p>}
      {uploadStatus === 'succeeded' && <p>File successfully uploaded</p>}
      {uploadStatus === 'failed' && <p>File upload failed: {uploadError}</p>}
    </div>
  );
};

export default UploadStatusComponent;

마무리

Redux Toolkit을 사용하여 자바스크립트 앱에서 파일 업로드를 처리하는 방법을 살펴보았습니다. Redux Toolkit은 간결한 코드와 강력한 기능을 제공하여 파일 업로드를 쉽게 관리할 수 있게 도와줍니다. 이를 통해 앱의 성능과 사용자 경험을 개선할 수 있습니다.

#Redux #FileUpload