Custom Hook을 이용한 이미지 업로드 기능

06 Nov 2023

customhook

이미지 업로드는 웹 애플리케이션에서 자주 사용되는 기능입니다. 이번에는 React에서 Custom Hook을 이용하여 이미지 업로드 기능을 구현하는 방법에 대해 알아보겠습니다.

Custom Hook이란?

Custom Hook은 React에서 함수 컴포넌트에서 상태 관리나 라이프사이클 메서드와 같은 기능을 추출하여 재사용 가능한 훅으로 만드는 것을 말합니다. Custom Hook을 이용하면 코드의 재사용성과 가독성을 향상시킬 수 있습니다.

Custom Hook을 사용한 이미지 업로드 기능 구현

먼저, 이미지 업로드할 컴포넌트에서 Custom Hook을 호출합니다. 이때, useState 훅을 이용하여 이미지 파일의 상태와 변경 함수를 생성합니다.

import React, { useState } from "react";

function UploadImageForm() {
  const [image, setImage] = useState(null);

  const handleImageUpload = (event) => {
    const file = event.target.files[0];
    setImage(file);
  };

  return (
    <div>
      <input
        type="file"
        accept="image/*"
        onChange={handleImageUpload}
      />
      {/* 업로드된 이미지 미리보기 */}
      {image && <img src={URL.createObjectURL(image)} alt="Uploaded Image" />}
    </div>
  );
}

export default UploadImageForm;

앞서 작성한 컴포넌트에서는 input 요소를 통해 사용자가 이미지 파일을 선택하면 handleImageUpload 함수가 호출되어 파일을 상태로 저장합니다. 그리고 업로드된 이미지가 있다면 미리보기를 나타냅니다.

이제 Custom Hook을 작성할 차례입니다. Custom Hook은 use로 시작하며 일반 함수와 유사한 형태로 작성됩니다. Custom Hook에서는 필요에 따라 추가적인 로직을 구현할 수 있습니다.

import { useState } from "react";

function useImageUploader() {
  const [image, setImage] = useState(null);

  const handleImageUpload = (event) => {
    const file = event.target.files[0];
    setImage(file);
  };

  return [image, handleImageUpload];
}

export default useImageUploader;

Custom Hook에서는 useState 훅을 사용하여 이미지 파일의 상태와 상태를 변경하는 함수를 생성합니다. 이후, [image, handleImageUpload] 형태로 배열을 반환합니다.

이제 Custom Hook을 이용하여 이미지 업로드 컴포넌트를 리팩토링할 수 있습니다.

import React from "react";
import useImageUploader from "./useImageUploader";

function UploadImageForm() {
  const [image, handleImageUpload] = useImageUploader();

  return (
    <div>
      <input
        type="file"
        accept="image/*"
        onChange={handleImageUpload}
      />
      {/* 업로드된 이미지 미리보기 */}
      {image && <img src={URL.createObjectURL(image)} alt="Uploaded Image" />}
    </div>
  );
}

export default UploadImageForm;

이제 Custom Hook을 이용하여 이미지 업로드 기능을 구현했습니다. 이를 이용하면 다른 컴포넌트에서도 동일한 이미지 업로드 기능을 쉽게 재사용할 수 있습니다.

마무리

Custom Hook을 이용하여 이미지 업로드 기능을 구현하는 방법에 대해 알아보았습니다. Custom Hook을 사용하면 리액트 컴포넌트에서 공통된 로직을 추출하여 재사용성과 가독성을 향상시킬 수 있습니다.