Custom Hook을 활용한 파일 다운로드 기능 구현

06 Nov 2023

customhook

파일 다운로드 기능은 웹 애플리케이션에서 매우 일반적인 기능입니다. 이번에는 Custom Hook을 활용하여 파일 다운로드 기능을 구현해보도록 하겠습니다.

필요한 패키지 설치

먼저, 파일 다운로드를 구현하기 위해 필요한 axios와 file-saver 패키지를 설치해야 합니다. 아래 명령어를 사용하여 패키지를 설치합니다.

npm install axios file-saver

Custom Hook 구현

이제 파일을 다운로드하기 위한 Custom Hook을 구현해보겠습니다. 예시로 useFileDownloader라는 이름의 Custom Hook을 만들어보겠습니다.

import axios from "axios";
import { saveAs } from "file-saver";

const useFileDownloader = () => {
  const downloadFile = async (url, filename) => {
    try {
      const response = await axios.get(url, { responseType: "blob" });
      saveAs(response.data, filename);
    } catch (error) {
      console.error("Failed to download file:", error);
    }
  };

  return { downloadFile };
};

export default useFileDownloader;

위 코드에서 useFileDownloader라는 Custom Hook을 정의하고, downloadFile 함수를 반환합니다. 이 함수는 주어진 URL로부터 파일을 다운로드하고, 사용자에게 해당 파일을 저장하게 해줍니다.

사용 예시

이제 위에서 구현한 Custom Hook을 사용하여 파일을 다운로드하는 예시를 살펴보겠습니다.

import useFileDownloader from "./useFileDownloader";

const MyComponent = () => {
  const fileDownloader = useFileDownloader();

  const handleDownload = () => {
    const fileUrl = "https://example.com/myfile.pdf"; // 다운로드할 파일의 URL
    const fileName = "myfile.pdf"; // 저장할 파일 이름

    fileDownloader.downloadFile(fileUrl, fileName);
  };

  return (
    <button onClick={handleDownload}>
      파일 다운로드
    </button>
  );
};

위 코드에서는 MyComponent 내에서 useFileDownloader Hook을 사용하여 fileDownloader라는 변수를 만들고, 그 변수의 downloadFile 함수를 호출하여 파일을 다운로드합니다. 파일의 URL과 저장될 파일 이름은 사용자가 원하는 값으로 설정할 수 있습니다.

마무리

위의 예시 코드처럼 Custom Hook을 활용하여 파일 다운로드 기능을 구현할 수 있습니다. 이러한 Custom Hook은 다른 컴포넌트에서도 재사용할 수 있으며, 코드의 가독성을 높여줄 수 있습니다. 이를 통해 파일 다운로드 기능을 간편하게 구현할 수 있습니다.

더 자세한 내용은 axios와 file-saver 패키지의 문서를 참조하시기 바랍니다. (해시태그: #CustomHook #파일다운로드)