Tag🔖

여행 블로그를 만들고 있기 때문에 포스트를 지역별로 분류하는게 좋다고 생각했고, 분류하는 방법으로 태그를 붙여서 분류할 수 있고, 검색을 할 수 있으면 좋겠다고 생각했다. 그래서 Tag를 구현해야 했다.

무엇을 이용할까?(@pathofdev/react-tag-input)

https://www.npmjs.com/package/react-tag-input
를 제일 많이 쓰고 있는 것 같긴 한데 의존 패키지가 너무 많고 좀 다루기가 힘들었다.
그래서 더욱 간단한 라이브러리를 찾았다.

https://www.npmjs.com/package/@pathofdev/react-tag-input

npm i @pathofdev/react-tag-input

Document가서 보니 정말 간단하고 직관적이다. 바로 적용해 주었다.

Customize

저 Tag는 readOnly로 설정할 경우 그냥 보여주기만 한다. 내가 원하는 기능은 각 Tag를 누를 때 마다 검색 페이지로 이동할 수 있도록 onClick에 함수를 달아주고 싶었다.
그래서 클릭이 필요한 Tag container의 경우는 새로운 컴포넌트를 만들어줬다.

export default function clickTags(props: TagsProps) {
  const [search, setSearch] = useState<string | undefined>();
  const tag = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (props.readOnly) {
      const tagList = tag.current?.childNodes[0].childNodes;
      tagList?.forEach((e: any) => {
        e.onclick = function () {
          setSearch(e.innerText);
        };
      });
    }
  }, []);

  return (
    <div ref={tag}>
      {search && <Redirect to={`/search?query=${search}`} />}
      <ReactTagInput {...props} />
    </div>
  );
}

따라서 만들어둔 검색 페이지로 이동 할 수 있게 되었다!