Custom Hook을 이용한 사진 필터링 구현하기

06 Nov 2023

customhook

이번 예제에서는 React의 Custom Hook을 이용하여 사진 필터링 기능을 구현해보겠습니다. Custom Hook을 사용하면 컴포넌트 간에 상태와 로직을 재사용할 수 있어 코드의 중복을 줄일 수 있습니다.

필요한 패키지 설치하기

먼저 프로젝트 디렉토리에서 아래 명령어를 사용하여 필요한 패키지를 설치합니다.

npm install react react-dom @emotion/react @emotion/styled

Custom Hook 만들기

사진 필터링 기능을 구현하기 위해 useImageFilter라는 Custom Hook을 만들어보겠습니다. 이 Hook은 다음과 같은 기능을 제공합니다.

선택한 필터 종류에 따라 이미지에 필터 적용하기
필터 종류 변경하기

다음은 useImageFilter Hook의 코드입니다.

import { useState } from 'react';

const useImageFilter = () => {
  const [filter, setFilter] = useState('');

  const applyFilter = (imageURL) => {
    // 선택한 필터 종류에 따라 이미지에 필터 적용하는 로직
    // ...

    return filteredImageURL;
  };

  return { filter, setFilter, applyFilter };
};

export default useImageFilter;

이 Hook에서는 filter 상태와 setFilter 함수를 사용하여 현재 선택된 필터 종류를 저장하고 변경할 수 있습니다. 또한 applyFilter 함수를 사용하여 이미지에 선택된 필터를 적용하고 결과 이미지의 URL을 반환합니다.

필터링 컴포넌트 만들기

이제 Custom Hook을 사용하여 실제로 필터링 기능을 가진 컴포넌트를 만들어보겠습니다.

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

const FilteredImage = ({ imageURL }) => {
  const { filter, setFilter, applyFilter } = useImageFilter();

  const handleFilterChange = (event) => {
    const selectedFilter = event.target.value;
    setFilter(selectedFilter);
  };

  const filteredImageURL = applyFilter(imageURL);

  return (
    <div>
      <img src={filteredImageURL} alt="Filtered Image" />
      <select value={filter} onChange={handleFilterChange}>
        <option value="">No Filter</option>
        <option value="grayscale">Grayscale</option>
        <option value="sepia">Sepia</option>
        <option value="blur">Blur</option>
      </select>
    </div>
  );
};

export default FilteredImage;

위 컴포넌트에서는 useImageFilter Hook을 사용하여 필터링에 관련된 상태와 로직을 가져옵니다. handleFilterChange 함수는 필터가 변경되었을 때 호출되며, 새로운 필터 값을 setFilter 함수로 설정합니다. filteredImageURL은 applyFilter 함수를 사용하여 현재 필터를 적용한 결과 이미지 URL을 받아옵니다.

마지막으로 부모 컴포넌트에서 FilteredImage 컴포넌트를 사용하여 이미지를 렌더링하고 필터링 기능을 사용할 수 있습니다.

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

const App = () => {
  const imageURL = 'https://my-image.com/photo.jpg';

  return (
    <div>
      <h1>Image Filtering Example</h1>
      <FilteredImage imageURL={imageURL} />
    </div>
  );
};

export default App;

이제 위의 예제를 실행하면 이미지와 선택한 필터를 적용할 수 있는 셀렉트 박스가 보여집니다. 셀렉트 박스에서 필터를 선택하면 이미지에 선택한 필터가 적용되어 보여집니다.

마무리

이번 예제에서는 Custom Hook을 이용하여 사진 필터링 기능을 구현하는 방법을 알아보았습니다. Custom Hook을 사용하면 코드의 재사용성을 높일 수 있으며, 컴포넌트 간의 로직을 분리하여 관리할 수 있습니다.

더 많은 React Custom Hook에 대한 정보는 공식 React 문서를 참고하시기 바랍니다. Happy coding!