230201

모달 컴포넌트를 재활용하고 싶었다.

searchParams를 통해 add일때와 edit일때를 구별해서 가져오게 하고 싶었는데, useQuery가 훅이다 보니까, 쉽지가 않았다. react-router-dom을 사용할 경우에도 get메서드를 사용하는건 같길래, 커스텀 훅으로 만들어서 사용하려고 했다. 

import { useEffect, useState } from 'react';

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

const useSearchParams = (arr: string[]) => {
  const [newObj, setNewObj] = useState<AnyObj>({});
//변수명 네이밍에 신경쓰지못했다ㅠㅠ
  useEffect(() => {
    const obj: AnyObj = {};
    const params = new URL(location).searchParams;
    const getParamsArr = arr.forEach((param: string) => {
      if (params.get(param)) obj[param] = params.get(param) as string;
      else obj[param] = null;
    });
    setNewObj(obj);
  }, [location.search]);

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

상수 params의 값을 new URL(location.search) 로 하려 했는데  construct 어쩌고 에러가나서, location으로 변경하였다. 그래도 location 부분이 계속 타입에러가 발생해서 그냥 여기서 react-router-dom의 useSearchParams를 불러서 가져오는게 나을 수도 있겠다 싶었다.

 

왜 이얘기를 붙였냐면

훅의 랜더링 순서가 바뀌면 화내는 리액트

훅의 렌더링 순서가 바뀌어서 화내는 콘솔창을 봤기 때문이다.

리액트쿼리 사용이 서툴러서 말도안되게 그냥 id 값이 없다면 initialState을 있다면 useQuery 훅의 반환값을 data라는 변수에 할당되도록 했다(삼항연산자로)

 아니 나는 재활용하고싶은데??? 쓰면서 사실 말이 안된다 이거 진짜 답없다 훅의 순서를 저장한다고 배웠는데 이게 말이되나?하면서 하긴했는데 역시나 콘솔창에 에러가 와다다다 쏟아졌다.

 

리액트쿼리는 잘못없어.. 내가 잘못있어...라는 심정으로 리액트쿼리를 검색해 봤는데, 아주 유용한 옵션이 있었다.

  const { data } = useQuery<{ item: ListContent }>(
    [Querykeys.ITEM, id, state],
    () => graphqlFetcher(GET_ITEM, { id, state }),{enabled: !!id},
  );

enabled <- 이 옵션을 추가한다면 id 값이 falsy값이라면 api요청을 보내지 않는다..!!

처음에는 값이 undefined일 때도 계속 요청이 가서 난감했는데 최고의 옵션이였다.