React 라이브러리 없이 통합 검색 구현하기

김명성·2022년 3월 26일
0

REACT

목록 보기
1/32
// API 데이터는 식당 외에도 여러 가게를 보내준다.
// 하지만 필요한 자료는 식당이기에 받아 온 API 데이터의 업종을 디스트럭쳐링하여 필터링 하였다.
  const filteredSearchData = () => {
    const fetchedAllStoreArray = data?.data.data.filter(
      ({ 업종 }: any) => !filterString.includes(업종)
    );
    const fetchedAllStore = fetchedAllStoreArray.map((storeArray: any) =>
      Object.values(storeArray)
    );
    const stringifyAllStore = fetchedAllStore.filter((store: any) =>
      store.join(',').includes(searchInputVal)
    );
    return stringifyAllStore;
  };

//jsx
...
{filteredSearchData().map((store: any) => <></>}
...
복잡한 함수이기에 useCallback으로 덮어주기
 const filteredSearchData = useCallback(() => {
    const fetchedAllStoreArray = data?.data.data.filter(
      ({ 업종 }: any) => !filterString.includes(업종)
    );
    const fetchedAllStore = fetchedAllStoreArray.map((storeArray: any) =>
      Object.values(storeArray)
    );
    const stringifyAllStore = fetchedAllStore.filter((store: any) =>
      store.join(',').includes(searchInputVal)
    );
    return stringifyAllStore;
  }, [data?.data.data, searchInputVal]);

0개의 댓글