230205

리액트 라우터의 useSearchParams 와 유사한 커스텀 훅을 만들고싶었다.

근데 작동을하지않네....

커스텀 훅 자체에서 바로 searchParams를 받아서 하고싶었는데, 렌더링이 되지 않음을 확인했다.

그래서 전역 상태관리 라이브러리인 recoil을 사용해 selector를 하나 만들어서 searchParams변수에서 window.location.search를 받아오게 했는데 생각해보니 상태가 아니기때문에 새로 초기화되잖아!!

좀 답답해져서 리액트라우터 깃허브에 갓다와서 힌트좀 얻어야겠다. 이거로 계속 씨름중....

import { useRecoilState } from 'recoil';
import { useEffect, useState, useRef } from 'react';
import { searchParamsState } from '../store';

interface AnyObj {
  [index: string]: string | null;
}

const useSearchParams = (arr: string[]) => {
  const [newObj, setNewObj] = useState<AnyObj>({});
  const [newArr] = useState([...arr]);
  const [search, setSearch] = useRecoilState(searchParamsState);
  const searchParams = window.location.search;
  useEffect(() => {
    setSearch(searchParams);
  }, [searchParams, setSearch]);
  useEffect(() => {
    const obj: AnyObj = {};
    if (search) {
      const params = new URLSearchParams(search);
      newArr.forEach((param: string) => {
        if (params.get(param)) obj[param] = params.get(param) as string;
        else obj[param] = null;
      });
      setNewObj(obj);
    } else {
      newArr.forEach((param: string) => {
        obj[param] = null;
      });
      setNewObj(obj);
    }
  }, [search, newArr]);

  return { ...newObj };
};
export default useSearchParams;

--------

문제점 해결과 이유!

현재 훅은 이렇다

import { useRecoilValue } from 'recoil';
import { useEffect, useState } from 'react';
import { searchParamsState } from '../store';

interface AnyObj {
  [index: string]: string | null;
}

const useSearchParams = (arr: string[]) => {
  const [newObj, setNewObj] = useState<AnyObj>({});
  const [newArr] = useState([...arr]);
  const search = useRecoilValue(searchParamsState);
  useEffect(() => {
    const obj: AnyObj = {};
    if (search) {
      const params = new URLSearchParams(search);
      newArr.forEach((param: string) => {
        if (params.get(param)) obj[param] = params.get(param) as string;
        else obj[param] = null;
      });
      setNewObj(obj);
    } else {
      newArr.forEach((param: string) => {
        obj[param] = null;
      });
      setNewObj(obj);
    }
  }, [search, newArr]);

  return { ...newObj };
};
export default useSearchParams;

이유는

지금 navigate는 react-router-dom 의 훅을 사용하고있었다. 근데  navigate는 본인들이 만든 locationContext 안에서 상태관리가 되어있고 훅들이 uselocation을 사용하기때문에 리코일로 따로 값을 관리하도록 했던 내 훅은 그냥 작동을 안하게 되는것이였다...

위에서   const searchParams = window.location.search; 이런식으로 계속받아오게 해도 이상하게 작동을 안하더라...ㅎㅎ

navigate를 사용해야 하는 곳에

   onClick={() => {
          setSearchParams('');
          navigate('/');
        }}

이런식으로 하면 작동되는걸 확인했다 근데 이게 무신의미가 있는것이지? 더복잡해진 기분ㅎㅎ 차라리 훅안에서 react-router-dom의 useLocation사용해서 하는게 더 편할지두~

++useLocation쓰면 겁나잘됨!