NextJS에서 queryString 변경 감지 hook 만들기

 

NextJS 환경에서 `/aaa?arg1=111` 경로를 `/aaa?arg1=222`로 push 혹은 replace 헀을떄 arg1를 받아오는 hook을 생성하는 과정을 간략하게 정리해 놓는다.

 

useQuery 훅 생성

필자는 p가 팝업레이어 아이디인데 path가 바뀔때 그부분은 제외한 로직이다.

export function useQuery() {
  const router = useRouter();
  const [query, setQuery] = useState(router.query);

  useEffect(() => {
    const beforeQuery = { ...query };
    const afterQuery = { ...router.query };

    // 팝업 파라미터 제외 (레이어 팝업)
    delete beforeQuery.p;
    delete afterQuery.p;

    const arraysAreEqual = (arrA, arrB) => {
      if (arrA.length !== arrB.length) {
        return false;
      }

      for (let i = 0; i < arrA.length; i++) {
        if (arrB.includes(arrA[i]) === false) {
          return false;
        }
      }

      return true;
    };

    if (!arraysAreEqual(Object.keys(beforeQuery), Object.keys(afterQuery))) {
      // if (query !== router.query) {
      setQuery(router.query);
    }
  }, [router.query]);

  return {
    query,
  };
}

 

useQuery 훅을 통한 이벤트 처리

...
import { useRouter } from 'next/router';
import { useQuery } from '../../../../hook/commonHook';

const NoticeList = (props) => {
  const router = useRouter();
  const { query } = useQuery();
  
  ...
  
  useEffect(() => {
    console.log('query : ', query);
    // fetch logic
  }, [query]);
  
  
  return (
    <>
      ...
    </>
  );
};

export default memo(NoticeList);

 

 

제 블로그는 공유하는것 보단 노트성 블로그!!