인프런 커뮤니티 질문&답변

import {useEffect, useState} from 'react';

import {queryKeys, storageKeys} from '@/constants';
import type {Marker} from '@/types';
import {getEncryptedStorage, setEncryptedStorage} from '@/utils';
import queryClient from '@/api/query-client';

const initialFilters = {
  RED: true,
  YELLOW: true,
  GREEN: true,
  BLUE: true,
  PURPLE: true,
  '1': true,
  '2': true,
  '3': true,
  '4': true,
  '5': true,
};

function useMarkerFilterStorage() {
  const [filterItems, setFilterItems] =
    useState<Record<string, boolean>>(initialFilters);

  const set = async (items: Record<string, boolean>) => {
    queryClient.invalidateQueries({
      queryKey: [queryKeys.MARKER, queryKeys.GET_MARKERS],
    });
    await setEncryptedStorage(storageKeys.MARKER_FILTER, items);
    setFilterItems(items);
  };

  const transformFilteredMarker = (markers: Marker[]) => {
    return markers.filter(marker => {
      return (
        filterItems[marker.color] === true &&
        filterItems[String(marker.score)] === true
      );
    });
  };

  useEffect(() => {
    (async () => {
      const storedData =
        (await getEncryptedStorage(storageKeys.MARKER_FILTER)) ??
        initialFilters;
      setFilterItems(storedData);
    })();
  }, [filterItems]);

  return {set, items: filterItems, transformFilteredMarker};
}

export default useMarkerFilterStorage;

의도대로 items의 값을 set으로 변경하면 필터링이 정상적으로 동작하지만 무한렌더링이 발생합니다.

무한 렌더링을 막기 위해 의존성 배열을 지우고 쿼리키를 무효화하는 방법등 많은 시도를 해봤지만 제대로 동작하지 않네요.

혹시 현재 진행된 강의에서 무한 렌더링을 해결할 수 있는 방법이 있을까요?