[TIL] 오늘의 개발일지

오늘의 개발일지

 

 

오늘은 미니 플젝을 하는 중에 recoil의 default value값을 내가 만들었던 호출 함수를 이용해서

서버에서 가져온 데이터를 설정하고 싶었는데, atom파일 내에서 함수를 실행하려고 하니 아래와 같은 에러가 발생했다.

 

Cannot read properties of null (reading 'useContext')

 

원인은 유즈쿼리를 컴포넌트 바깥에 사용을 하려고 했기 때문이었다

유즈쿼리는 컴포넌트 안에서만 사용할 수 있는 훅인데, 훅!!! 훅이자나!!!!!(급발진)

내가 컴포넌트 안에서 안쓰고 있었지....그래....맞아...

 

가장 심플하게 떠오른 방법은 mainPage에서 useRecoilState로 초기값을 셋팅시켜주는 방법이었다.

function App() {
  const { isLoading, data: menuList, error } = useQuery({
    queryKey: ["wholeCoffeeData"],
    queryFn: getWholeCoffeeData,
  });

  useEffect(() => {
    if (menuList) {
      userSelectMenuList.default = menuList;
    }
  }, [menuList]);

}

 

그런데 단순히 난 item의 menuName이 필요했던거지, 전체를 다 가져와서 atom의 default를 셋팅해주고 싶은건 아니었기에...

메뉴를 3개만 잡고 하기로 했어서, 우선은 menuName을 atom에다가 추가해줘서 보이도록 수정해주었다

 

나중에 데이터가 많을 경우에는 첨부터 서버에서 가져와야 할테공!