Custom Hook을 활용한 태그 필터링 기능 추가

06 Nov 2023

reactjs

태그 필터링은 웹 애플리케이션에서 많이 사용되는 기능 중 하나입니다. 사용자가 특정 태그를 선택하면 해당 태그에 대한 데이터만 표시되는 기능입니다. 이번 기사에서는 React에서 Custom Hook을 활용하여 태그 필터링 기능을 추가하는 방법을 알아보겠습니다.

필요한 패키지 설치

먼저 필요한 패키지를 설치해야 합니다. React 애플리케이션에서 태그 필터링을 구현하기 위해 react와 react-dom 패키지가 필요합니다. 추가적으로 태그를 선택하는 UI 컴포넌트를 구현하기 위해 react-icons 패키지를 설치합니다.

npm install react react-dom react-icons --save

Custom Hook 구현

이제 Custom Hook을 구현해보겠습니다. useTagFilter라는 이름으로 Custom Hook을 생성하고, 선택된 태그 목록을 관리하도록 할 것입니다. 아래는 이 Hook의 코드입니다.

import { useState, useEffect } from 'react';

const useTagFilter = (data) => {
  const [tags, setTags] = useState([]);
  const [filteredData, setFilteredData] = useState([]);

  useEffect(() => {
    if (tags.length === 0) {
      setFilteredData(data);
    } else {
      const filtered = data.filter((item) => {
        return item.tags.some((tag) => tags.includes(tag));
      });
      setFilteredData(filtered);
    }
  }, [tags, data]);

  const handleTagClick = (tag) => {
    if (tags.includes(tag)) {
      setTags(tags.filter((t) => t !== tag));
    } else {
      setTags([...tags, tag]);
    }
  };

  return {
    tags,
    filteredData,
    handleTagClick,
  };
};

export default useTagFilter;

구현된 Custom Hook은 선택된 태그 목록을 tags 변수로 관리하고, 선택된 태그에 대한 데이터 목록을 filteredData 변수로 관리합니다. handleTagClick 함수는 태그가 클릭되었을 때 호출되며, 선택된 태그를 추가하거나 제거합니다.

태그 필터링 기능 추가하기

이제 Custom Hook을 활용하여 태그 필터링 기능을 추가해보겠습니다. 아래는 태그 필터링을 구현한 예제 코드입니다.

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

const TagFilterExample = ({ data }) => {
  const { tags, filteredData, handleTagClick } = useTagFilter(data);

  return (
    <div>
      <div>
        {tags.map((tag) => (
          <button
            key={tag}
            onClick={() => handleTagClick(tag)}
            style={{ background: tags.includes(tag) ? 'blue' : 'white' }}
          >
            {tag}
          </button>
        ))}
      </div>
      <ul>
        {filteredData.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default TagFilterExample;

위의 예제 코드는 TagFilterExample 컴포넌트를 정의하고, 이 컴포넌트에서는 Custom Hook을 사용하여 태그 필터링 기능을 구현하였습니다. data는 원본 데이터 배열을 전달하는 prop으로, 필요에 따라 자신에게 맞는 데이터를 전달하면 됩니다.

태그가 선택되면 선택된 태그 목록과 해당 태그에 대한 데이터 목록이 표시됩니다. 선택된 태그는 파란색으로 강조되며, 다시 클릭하면 선택이 해제됩니다.

결론

Custom Hook을 활용하여 간편하게 태그 필터링 기능을 구현할 수 있습니다. 이를 통해 사용자는 원하는 태그에 대한 데이터만을 표시하여 편리하게 정보를 찾을 수 있습니다.