Custom Hook을 사용한 실시간 검색 기능 구현

06 Nov 2023

reactjs

소개

React에서 실시간 검색 기능을 구현하는 방법 중 하나는 Custom Hook을 사용하는 것입니다. Custom Hook은 React에서 기능을 재사용하기 위해 사용되며, 이를 활용하여 실시간 검색 기능을 쉽게 구현할 수 있습니다.

Custom Hook 구현

먼저, 검색 기능을 위한 Custom Hook을 생성합니다. useSearch라는 이름을 가진 Custom Hook을 만들어보겠습니다.

import { useState, useEffect } from "react";

const useSearch = (searchTerm, data) => {
  const [searchResults, setSearchResults] = useState([]);

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

  return searchResults;
};

export default useSearch;

위 코드에서 useSearch Hook은 searchTerm과 data라는 두 개의 매개변수를 받습니다. searchTerm은 검색어를 나타내는 문자열이고, data는 검색 대상이 되는 데이터 배열입니다.

Hook 내부에서는 useEffect를 사용하여 searchTerm과 data의 변화를 감지하고, 검색 결과를 업데이트합니다. filter 메소드를 사용하여 검색어와 일치하는 항목만 추출하고, setSearchResults를 통해 결과를 업데이트합니다.

마지막으로, searchResults를 반환하여 화면에서 검색 결과를 사용할 수 있도록 합니다.

실제 사용 예시

사용자가 검색어를 입력하여 실시간으로 검색 결과를 확인할 수 있는 간단한 예시를 살펴보겠습니다.

import React, { useState } from "react";
import useSearch from "./useSearch";

const Search = () => {
  const [searchTerm, setSearchTerm] = useState("");
  const data = ["apple", "banana", "orange", "grape", "kiwi"];
  const searchResults = useSearch(searchTerm, data);

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={e => setSearchTerm(e.target.value)}
      />
      <ul>
        {searchResults.map((result, index) => (
          <li key={index}>{result}</li>
        ))}
      </ul>
    </div>
  );
};

export default Search;

위 코드에서 Search 컴포넌트는 searchTerm과 data를 상태로 관리합니다. useSearch Hook을 사용하여 실시간 검색 결과를 searchResults 변수로 받아옵니다.

검색어 입력을 위한 input 요소는 searchTerm의 값을 이용하고, onChange 이벤트를 통해 검색어를 업데이트합니다. 그리고 검색 결과를 리스트 형태로 출력합니다.

마무리

위 예시를 참고하여 Custom Hook를 사용하여 실시간 검색 기능을 구현할 수 있습니다. Custom Hook은 React 프로젝트에서 여러번 재사용될 수 있으며, 검색 외에도 다양한 기능을 구현할 수 있습니다. 효율적이고 가독성있는 코드를 작성하기 위해 Custom Hook을 적극 활용해보세요!

참고

#React #CustomHook