Custom Hook을 이용한 이미지 검색 기능 추가하기

06 Nov 2023

reactjs

이미지 검색 기능을 구현하기 위해 React 애플리케이션에서 커스텀 훅(Custom Hook)을 만들어 사용하는 방법에 대해서 알아보겠습니다. 이 커스텀 훅은 이미지 검색 API를 호출하고 검색 결과를 반환하는 역할을 수행할 것입니다.

커스텀 훅 만들기

먼저, useImageSearch라는 커스텀 훅을 만들어보겠습니다. 이 훅은 query라는 검색어를 인자로 받고, 검색 결과를 반환하는 로직을 포함하게 됩니다.

import { useState, useEffect } from 'react';

const useImageSearch = (query) => {
  const [images, setImages] = useState([]);

  useEffect(() => {
    const searchImages = async () => {
      try {
        const response = await fetch(`https://api.example.com/images/search?query=${query}`);
        const data = await response.json();
        setImages(data.results);
      } catch (error) {
        console.error('Error searching images:', error);
      }
    };

    searchImages();
  }, [query]);

  return images;
};

export default useImageSearch;

위의 예시 코드에서는 useEffect 훅을 이용하여 검색어가 변경될 때마다 이미지 검색을 수행하도록 구현하였습니다. fetch 함수를 이용하여 API를 호출하고, 받아온 결과를 상태 변수에 저장하여 컴포넌트에서 사용할 수 있도록 했습니다.

이미지 검색 컴포넌트에서 커스텀 훅 사용하기

이제 만든 useImageSearch 커스텀 훅을 이미지 검색 컴포넌트에서 사용해보겠습니다.

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

const ImageSearch = () => {
  const [query, setQuery] = useState('');
  const images = useImageSearch(query);

  const handleInputChange = (e) => {
    setQuery(e.target.value);
  };

  return (
    <div>
      <input type="text" value={query} onChange={handleInputChange} />
      {images.map((image, index) => (
        <img key={index} src={image.url} alt={image.name} />
      ))}
    </div>
  );
};

export default ImageSearch;

위의 코드에서는 useImageSearch 훅을 호출하여 query를 인자로 전달하고, 반환된 이미지 배열을 컴포넌트에서 사용합니다. input 요소를 사용하여 검색어를 입력받고, 결과 이미지를 매핑하여 화면에 렌더링합니다.

이제 이미지 검색 기능이 추가된 컴포넌트를 이용하여 애플리케이션을 실행하면, 입력한 검색어에 해당하는 이미지들이 화면에 표시될 것입니다.

결론

이렇게 커스텀 훅을 사용하여 이미지 검색 기능을 추가할 수 있습니다. 커스텀 훅을 활용하면 중복되는 로직을 간편하게 재사용할 수 있고, 코드를 깔끔하게 구조화할 수 있습니다. 아래의 링크에서 자세한 내용을 참고하시기 바랍니다.

React Hooks 문서

#React #ReactHooks