Custom Hook을 사용한 텍스트 검색 기능 추가

06 Nov 2023

reactjs

텍스트 검색 기능은 웹 애플리케이션에서 매우 유용하며 사용자가 특정 텍스트를 검색하여 필요한 정보를 찾을 수 있게 해줍니다. 이번 기술 블로그에서는 React 애플리케이션에서 Custom Hook을 사용하여 간단하게 텍스트 검색 기능을 추가하는 방법을 알아보겠습니다.

Custom Hook

Custom Hook은 React 함수 컴포넌트에서 상태(State)와 생명주기(Lifecycle) 기능을 공유하기 위해 사용되는 함수입니다. 이는 기존의 로직을 캡슐화하고 재사용성을 높이는 데 도움이 됩니다. 텍스트 검색 기능을 위해 우리는 useSearch라는 Custom Hook을 만들 것입니다.

import { useState, useEffect } from 'react';

const useSearch = (initialData, searchKey) => {
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResults, setSearchResults] = useState([]);

  const handleSearch = (event) => {
    setSearchQuery(event.target.value);
  };

  useEffect(() => {
    const results = initialData.filter((item) =>
      item.toLowerCase().includes(searchQuery.toLowerCase())
    );
    setSearchResults(results);
  }, [searchQuery, initialData]);

  return {
    searchQuery,
    searchResults,
    handleSearch,
  };
};

export default useSearch;

위의 코드는 useSearch라는 Custom Hook을 정의합니다. 이 Hook은 initialData와 searchKey라는 두 가지 매개변수를 받으며, searchQuery와 searchResults라는 두 가지 상태 값과 handleSearch라는 이벤트 핸들러를 반환합니다.

useSearch Hook은 searchQuery 값을 사용하여 initialData 배열에서 검색을 수행하고, 결과를 searchResults에 저장합니다.

텍스트 검색 기능 추가

이제 텍스트 검색 기능을 추가할 컴포넌트에서 useSearch Hook을 사용해보겠습니다.

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

const SearchComponent = ({ data }) => {
  const { searchQuery, searchResults, handleSearch } = useSearch(data);

  return (
    <div>
      <input type="text" value={searchQuery} onChange={handleSearch} />
      <ul>
        {searchResults.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default SearchComponent;

위의 코드는 SearchComponent라는 컴포넌트에서 useSearch Hook을 사용하고, 텍스트 입력을 받아 검색 기능을 수행합니다. 검색 결과는 리스트 형태로 표시됩니다.

이제 SearchComponent를 원하는 곳에서 사용하여 텍스트 검색 기능을 추가할 수 있습니다.

마무리

Custom Hook을 사용하여 컴포넌트 간 로직을 공유하는 것은 React 애플리케이션 개발에서 큰 도움이 됩니다. 위에서 살펴본 예제를 참고하여 텍스트 검색 기능을 추가할 수 있도록 해보세요. 이를 통해 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.

#react #customhook