파일을 업로드하는 기능은 웹 애플리케이션에서 자주 사용되는 기능 중 하나입니다. 이번 글에서는 React에서 파일 업로드를 구현하기 위해 Custom Hook을 사용하는 방법을 알아보겠습니다.

Custom Hook이란?

Custom Hook은 React에서 로직을 재사용하기 위한 개념입니다. 여러 컴포넌트에서 동일한 로직이 필요한 경우, Custom Hook을 생성하여 해당 로직을 추상화하고 재사용할 수 있습니다. 이러한 접근 방식은 코드의 가독성과 유지 보수성을 향상시킬 수 있습니다.

파일 업로드 Custom Hook 구현하기

먼저, 파일 업로드를 위한 Custom Hook인 useFileUpload을 구현해보겠습니다. 아래는 예시 코드입니다.

import { useState } from 'react';

const useFileUpload = () => {
  const [file, setFile] = useState(null);

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

  const uploadFile = () => {
    // 파일 업로드 로직 작성
  };

  return {
    file,
    handleFileChange,
    uploadFile,
  };
};

export default useFileUpload;

위의 코드에서 useFileUpload 함수는 file, handleFileChange, uploadFile 세 가지를 반환합니다. file은 현재 선택된 파일을 가리키는 상태 변수입니다. handleFileChange 함수는 파일 선택 시 호출되는 이벤트 핸들러입니다. uploadFile 함수는 파일을 업로드하는 로직을 작성해야 합니다.

파일 업로드 컴포넌트에서 Custom Hook 사용하기

이제 파일 업로드 컴포넌트에서 Custom Hook을 사용해보겠습니다. 아래는 예시 코드입니다.

import React from 'react';
import useFileUpload from './useFileUpload';

const FileUploadComponent = () => {
  const { file, handleFileChange, uploadFile } = useFileUpload();

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={uploadFile}>Upload</button>
      {file && <p>Selected file: {file.name}</p>}
    </div>
  );
};

export default FileUploadComponent;

위의 코드에서 useFileUpload을 호출하여 반환된 객체를 비구조화 할당을 통해 가져옵니다. 그리고 파일 선택을 위한 input 요소와 업로드 버튼을 렌더링합니다. 파일이 선택되면 선택된 파일의 이름을 출력합니다.

이제 파일 업로드 기능을 구현하는 데 사용할 컴포넌트에서 FileUploadComponent를 사용하면 됩니다.

마무리

이번 글에서는 Custom Hook을 사용하여 React 애플리케이션에서 파일 업로드 기능을 구현하는 방법을 알아보았습니다. Custom Hook을 사용하면 로직을 추상화하고 재사용할 수 있으므로 코드의 가독성과 유지 보수성을 향상시킬 수 있습니다. 파일 업로드 기능 외에도 다른 로직에도 Custom Hook을 적용하여 개발 생산성을 높여보세요.

References:

• React Custom Hooks
• Uploading Files