이번 포스트에서는 React 애플리케이션에 Custom Hook을 사용하여 썸네일 생성 기능을 추가하는 방법에 대해 알아보겠습니다. 썸네일은 이미지의 미리보기로 사용되며, 사용자가 업로드한 이미지를 작은 크기로 조정하여 보여줍니다.

Custom Hook 만들기

먼저, Custom Hook을 만들어서 썸네일을 생성하는 기능을 구현해야 합니다. 이를 위해 useThumbnail이라는 Custom Hook을 생성합니다.

import { useState, useEffect } from 'react';

const useThumbnail = (file) => {
  const [thumbnail, setThumbnail] = useState(null);

  useEffect(() => {
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setThumbnail(reader.result);
      };
      reader.readAsDataURL(file);
    }
  }, [file]);

  return thumbnail;
};

export default useThumbnail;

위의 코드에서는 useThumbnail이라는 Custom Hook을 정의하였습니다. 이 Hook은 file이라는 매개변수를 받아 사용자가 업로드한 이미지 파일을 읽고, 파일의 데이터를 thumbnail 상태 변수에 저장하여 반환합니다.

썸네일 생성하기

이제 썸네일 생성 기능을 적용할 컴포넌트를 작성해보겠습니다. 예를 들어, UploadImage라는 컴포넌트에 썸네일을 생성하는 기능을 추가해보겠습니다.

import React, { useState } from 'react';
import useThumbnail from './useThumbnail';

const UploadImage = () => {
  const [selectedFile, setSelectedFile] = useState(null);
  const thumbnail = useThumbnail(selectedFile);

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

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      {thumbnail && <img src={thumbnail} alt="Thumbnail" />}
    </div>
  );
};

export default UploadImage;

위의 코드에서는 UploadImage 컴포넌트 내부에서 useThumbnail Custom Hook을 사용하고 있습니다. selectedFile 상태 변수에 사용자가 선택한 파일을 저장하고, handleFileChange 함수를 통해 파일 선택 이벤트를 처리합니다. 선택한 파일을 useThumbnail Hook에 전달하여 썸네일을 생성하고, 생성된 썸네일을 화면에 보여줍니다.

이제 UploadImage 컴포넌트를 다른 컴포넌트에서 사용하면, 사용자가 업로드한 이미지의 썸네일을 보여주는 기능을 간편하게 추가할 수 있습니다.

마무리

이번 포스트에서는 React 애플리케이션에 Custom Hook을 사용하여 썸네일 생성 기능을 추가하는 방법을 알아보았습니다. Custom Hook을 사용하면 반복적으로 사용되는 기능을 효율적으로 재사용할 수 있으며, 코드를 깔끔하고 가독성 좋게 유지할 수 있습니다. 리액트 애플리케이션에서 썸네일 생성이 필요한 경우, 이러한 Custom Hook을 활용해보세요.

#tech #react