[react query] 리액트쿼리 도입하기 (1)

프로젝트에서 기존에 refresh라는 방법을 사용했다.

const [refresh, setRefresh] = useState(-1);
const refresher = () => {
  setRefresh(refresh * -1)
};
useEffect(() => {

}, [refresh])

새로고침 없이 최신 데이터를 가져오기 위해 useEffect의 의존성배열에 refresh 값을 두고, 사용자의 동작으로 인해 데이터에 변화가 있을때마다 refresher 함수를 실행시킨다. refresher 함수가 실행되면 refresh 상태가 변하고 UI에 바로 반영이 되게 된다.

그런데 이 방법은 문제가 있다. 표기되는 데이터마다 refresh를 가져야 하게 된 것. 지금 보이는 프로젝트에서 refresh 관련 상태만 ookbackRefresh, pointRefresh, freindRefresh 등... 거의 페이지마다(모달마다) 각각의 상태를 갖고있다. 급하게 refresh를 추가하면서 현타가 왔던 생각이 난다..ㅋㅋ

이게 맞나?

그리고 react query라는 것을 알게 되었다.

리액트쿼리를 쓰면 최신 데이터를 가져오는 부분도 해결이 될 것이고, 코드도 줄 것이다. 거기다 UI state와 server state를 분리해서 관리할 수 있게 되니 사용하지 않을 이유가 없다.