타입스크립트에 이어서 리액트쿼리까지 투두 앱에 적용해보았다.
그런데 리액트쿼리를 쓰면서 기시감이 느껴졌다.
이거... 리덕스랑 똑같은거같은디?
결론적으로 리덕스는 상태관리를 위해 쓰는데, 리액트쿼리는 이 상태 에서 서버상태를 분리해 관리할 수 있도록 한다.
이렇게 UI state / Server state 로 나누어 생각할 수 있게 된다! 오호
과연 응답받은 데이터가 최신의 것이 맞는가에 대한 고민이 있었고, 비동기 호출하는 데이터들을 캐시처럼 다루는 전략이 생겼으니...
그 개념을 stale-while-revalidate 라고 한다.
캐시된 응답이 오래될 수 있다고 여기고, 그 캐시되 응답을 재검증한다.
max-age가 도래했다면(유통기한),
stale-while-revalidate를 확인한다(소비기한).
"데이터 너, 썩었니?"
확인하고 아직 안썩었다면 일단 소비하고 갱신한다.(ㅋㅋ)
리액트쿼리로 api 호출에 대한 별도의 저장소를 갖고 관리할 수 있게 된다. 서버 상태관리를 자동으로 해주기 때문에 UI에만 신경쓰면 된다.
React Query를 사용하기 전
기존에 내가 작업했던 것을 생각해보면, useEffect를 사용해서 비동기 호출을 통해 서버와 통신하고 응답받은 데이터를 useState로 담아 사용했었다.
그런데 이러한 state를 의존성배열에 두면 알아서 값이 변하면 인지하고 렌더링하지 않을까? 싶지만... 그렇지 않다. 무한로딩의 굴레에 빠져벌임.
그래서 refresh라는 상태를 만들어서 관리했었다. (그때 썼던 벨로그 링크)
이게 문제가 뭐냐면... 각종 refresh가 생기게된다.
내 프로젝트에 있는 refresh들만 해도 friendRefresh, letterRefresh,, 이런 개발자스럽지 못한 방법을 사용했었는데ㅋㅋㅋㅋㅋ 하지만 새로고침 하지 않고 세련되게 ui를 바꾸고 싶었고 찾은 방법은 이거였다구
지금은 내가 리액트쿼리를 공부해보고 적용하면 좋을 것 같아서 프로젝트 팀원분들께 제안을 날려본 상태다. 타입스크립트도 내가 하자고해서 진행한 상태인데 좀 부담스러울 수도 있겠지만ㅋㅋㅋㅋ 아 여러분 우리 제대로 된 프로젝트 하나있는데 알차게 쓰자구여!!
React Query 다운받기
리액트쿼리 다운로드
npm i @tanstack/react-query
npm i react-query 하면 최신 버전을 받을 수 없다...
아니 리액트쿼리 홈페이지 들어가서 install 들어가서 봤는데... ㅠ v3홈페이지로 들어갔어서 그런걸까 내가 꼼꼼히 보지 않아서 그런가 몰랐다.
리액트쿼리 홈페이지
https://tanstack.com/
React Query 적용후
useState, useEffect 불필요해서 삭제.
리액트쿼리가 알아서 최신 값으로 바꿔주기때문에 refresh도 사용할 필요가 없어졌다.
Mutation 등의 작업이 이루어지고 queryClient.invalidateQueries 를 사용해 수동으로 쿼리를 무효화 하여 revalidate된다.
export const useTodosQuery = (state) =>
useQuery(['todo', state], () => fetchTodos(state))'todo'는 유니크한 키, state는 useState의 상태와 같다.
fetchTodos는 useEffect 내에서 실행되는 함수와 같다.
- 쿼리의 상태는
쿼리 키를 중심으로 관리된다.
쿼리 키를 따로 변수화해 사용하기도 함.
리액트쿼리 깃허브
https://github.com/TanStack/query
공식문서 예제를 보니까 확실히 더 이해가 잘 된다!!
앞으로는 블로그 돌아다니면서 복붙하지 말고 공식문서를 보는 습관을 들여야겠다...!!
