Custom Hook을 사용한 데이터 필터링 기능 추가

06 Nov 2023

customhook

데이터 필터링은 웹 애플리케이션에서 매우 중요한 기능 중 하나입니다. 사용자가 원하는 조건에 맞는 데이터만을 표시하는 기능을 제공함으로써 사용자 경험을 향상시킬 수 있습니다. 이번 블로그 포스트에서는 React에서 Custom Hook을 사용하여 데이터 필터링 기능을 추가하는 방법에 대해 알아보겠습니다.

Custom Hook 만들기

우선, 데이터를 필터링하기 위해 Custom Hook을 만들어야 합니다. 아래는 간단한 예제 코드입니다.

import { useState, useEffect } from 'react';

const useDataFilter = (initialData) => {
  const [data, setData] = useState(initialData);
  const [filteredData, setFilteredData] = useState(initialData);
  const [filter, setFilter] = useState('');

  useEffect(() => {
    const filtered = data.filter(item => item.toLowerCase().includes(filter.toLowerCase()));
    setFilteredData(filtered);
  }, [data, filter]);

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

  return { filteredData, handleFilterChange };
}

export default useDataFilter;

위의 코드는 useDataFilter라는 Custom Hook을 정의한 것입니다. 이 Hook은 필터링된 데이터와 필터링 조건을 변경하는 함수를 반환합니다.

Hook 사용하기

이제 사용자는 Custom Hook을 사용하여 데이터 필터링 기능을 구현할 수 있습니다. 예를 들어, 다음과 같이 사용할 수 있습니다.

import useDataFilter from './useDataFilter';

const DataList = ({ data }) => {
  const { filteredData, handleFilterChange } = useDataFilter(data);

  return (
    <div>
      <input type="text" onChange={handleFilterChange} placeholder="Filter data" />
      <ul>
        {filteredData.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default DataList;

위 코드에서는 useDataFilter Hook을 사용하여 데이터를 필터링하고, 사용자가 입력한 필터 조건에 맞게 데이터를 표시합니다. 사용자는 input 요소를 통해 필터 조건을 변경할 수 있습니다.

결론

Custom Hook을 사용하여 데이터 필터링 기능을 구현하는 방법을 살펴보았습니다. 이를 통해 사용자가 원하는 데이터만을 표시함으로써 애플리케이션의 사용자 경험을 향상시킬 수 있습니다. Custom Hook은 React에서 유용한 패턴 중 하나이므로, 적절한 상황에서 활용해 보시기 바랍니다.

[참고 자료]

React 공식 문서