Custom Hook을 활용한 이미지 크롭 기능 구현하기

06 Nov 2023

reactjs

이미지 크롭 기능은 웹 애플리케이션에서 많이 사용되는 기능 중 하나입니다. 사용자가 이미지를 선택하고 원하는 부분을 크롭하여 저장할 수 있게 해주는 기능입니다. 이번 글에서는 React에서 Custom Hook을 활용하여 이미지 크롭 기능을 구현하는 방법을 알아보겠습니다.

1. react-easy-crop 설치하기

이미지 크롭 기능을 구현하기 위해 react-easy-crop이라는 라이브러리를 사용하겠습니다. 이 라이브러리는 이미지를 드래그하여 크롭하는 기능을 제공합니다. 먼저, 다음 명령어를 사용하여 라이브러리를 설치합니다.

npm install react-easy-crop

2. Custom Hook 생성하기

이제 Custom Hook을 만들어 이미지 크롭 기능을 구현해보겠습니다. useImageCrop라는 이름의 파일을 생성한 후 다음 코드를 작성합니다.

import React, { useState } from 'react';
import Cropper from 'react-easy-crop';

const useImageCrop = () => {
  const [crop, setCrop] = useState({ x: 0, y: 0 });
  const [zoom, setZoom] = useState(1);
  
  const handleCropChange = (crop) => {
    setCrop(crop);
  };
  
  const handleZoomChange = (zoom) => {
    setZoom(zoom);
  };
  
  const CropContainer = ({ src }) => (
    <div>
      <Cropper
        image={src}
        crop={crop}
        zoom={zoom}
        aspect={4 / 3}
        onCropChange={handleCropChange}
        onZoomChange={handleZoomChange}
      />
    </div>
  );
  
  return {
    CropContainer,
    crop,
    zoom,
  };
};

export default useImageCrop;

위 코드에서는 useImageCrop라는 Custom Hook을 만들었습니다. 이 Hook은 현재 crop 상태와 zoom 상태를 관리하며 사용자가 이미지를 크롭할 수 있는 CropContainer 컴포넌트를 반환합니다.

3. 이미지 크롭 컴포넌트 사용하기

이제 Custom Hook을 사용하여 이미지 크롭 기능을 구현해보겠습니다. 다음과 같이 코드를 작성합니다.

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

const ImageCrop = () => {
  const { CropContainer, crop, zoom } = useImageCrop();

  const handleSave = () => {
    // 크롭된 이미지 저장 처리 로직 작성
  };

  return (
    <div>
      <CropContainer src="이미지 소스 URL" />
      <button onClick={handleSave}>
        Save
      </button>
    </div>
  );
};

export default ImageCrop;

위 코드에서는 useImageCrop Custom Hook에서 반환한 CropContainer 컴포넌트를 사용하여 이미지를 크롭할 수 있습니다. CropContainer 컴포넌트에는 src 속성으로 이미지 소스 URL을 전달합니다. 또한, handleSave 함수를 사용하여 크롭된 이미지를 저장하는 처리 로직을 작성할 수 있습니다.

마무리

이렇게 React의 Custom Hook을 활용하여 이미지 크롭 기능을 구현하는 방법에 대해 알아보았습니다. react-easy-crop 라이브러리를 사용하면 간단하게 이미지 크롭 기능을 구현할 수 있습니다. 이를 활용하여 웹 애플리케이션에 다양한 기능을 추가할 수 있습니다.

#react #javascript