TIL-23.04.27

 

 

문제점

지난 25일에 겪었던 useEffect 내 api get 무한루프요청...

유저 인증 확인을 하기위해 백엔드 서버에 get요청을 해야했고, reponse를 받아 해당 유저가 유효한지의 여부를 알수있는데

이 api요청을 어떻게 줘야하는지가 고민이었다

모든 컴포넌트에서 행동하는 유저의 유효성을 검사하기위해 트리 상 상단에 위치한 app.js에서 유저 유효성 검사 로직을 useEffect내 작성했다. 역시나.. 무한 get요청 루프가 돌았다... 저번에는 setTimeout()으로 억지로 get요청 횟수를 줄였을뿐이라 그 방법으로는 도저히 안되겠다 싶었다.

지금 내가 정말로 필요했던건!

데이터가 유효한지 주기적으로 불러올것 , 데이터에 변경점이 있는 경우에만 리렌더링을 유발할것 , 데이터를 다시 호출할때 응답이 오기 전까지는 이전 데이터를 계속 보여줄것 

그동안 서버로부터 데이터를 받아오기위한 get요청을 언제 어떻게 줘야하는지가 항상 고민이였다

 

 

 

 

시도한것

해경방법이 있을까 구글링을 하던중 react-query라는 것을 우연히 보게되었다. 리액트쿼리가 요즘 프론트엔드 개발자 사이에서 핫한것이라길래 뭐길래 그러지? 라는 마음으로 블로그를 읽어보았는데

이럴수가.. 내가 정말로 필요했던 그 기능들을 사용할수 있는 라이브러리였다

  const userCheck = async () => {
    const response = await axios.get('http://3.38.191.164/user', {
      headers: { Authorization: `Bearer ${cookie.get('loginCookie')}` },
    });
    return response;
  };
  const { data: auth } = useQuery('user', userCheck);

기존에 useEffect안에 넣었던 axios get요청을 useQuery를 사용해 요청했고 무한루프 현상은 말끔히 사라졌다. 솔직히 감탄했다

요 며칠 계속 이 무한루프를 어떻게 해결해야하는지 생각해왔는데, 우연히 본 블로그 글 하나로 이렇게 모든게 해결되어버리나?..

나름 리액트 쿼리를 내 머리 속에 이렇게 기억시켰다

클라이언트와 서버의 상태 값을 일치시켜줘야하는 요구사항에 부가적으로 생길 수 있는 로직들을 리액트 쿼리의 api와 인터페이스로 간단하게 해결할 수 있도록 도와주는 고마운 라이브러리

 

 

 

알게된점

개발자는 삽질을 해봐야한다