[react] Filtering 기능 구현

Input을 사용해서 Search기능을 구현해야하는 경우가 자주 있다. 이 때 query에 따른 아이템을 보여주고 싶다면 어떻게 해야할까?

대소문자를 모두 포함한 query에 기반해서 아이템을 필터링 하고 싶다면, new RegExp()와 match()를 사용할 수 있다.

  const handleChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>): void => {
      setQuery(e.target.value);
    },
    [onChange]
  );

  // (*) Here
  const handleSaveFilteredList = useCallback((): void => {
    if (query !== '') {
      const regex = new RegExp(`${query}`, 'gi');
      const filteredItems: string[] = list.filter(item => item.match(regex));
      setFilteredList(filteredItems);
    }
  }, [list, query]);

  useEffect(() => {
    handleSaveFilteredList();
  }, [handleSaveFilteredList]);

여기에 조건문과 함께 사용을 해서 filteredList가 있다면 filteredList를 맵핑한 결과물을, 그렇지 않다면 기존의 list를 맵핑한 결과물을 반환한다.