프로젝트/[개인] 티끌모아태산

react-query란?

MI개발자 2023. 1. 22. 22:05

web frontend 애플리케이션은 서버와 데이터 통신을 하면서, 서버에 있는 데이터를 가져와서 보여주는 경우가 대부분일 것이다. 그때 네트워크에서 가져온 데이터를 상태 관리할 수 있게 도와주는 라이브러리 중 가장 많이 쓰여지고 있는 것이 바로 react-query이다.
최근에는 react-query가 tanstack query로 업데이트 됐는데 react가 아닌 vue, svelte, solid에서도 사용이 가능해졌기 때문에 react-query에서 tanstack query로 네이밍이 바뀌었다고 한다.

 

  • react-query란?
  • 왜 사용하는가 ? 
    • 서버에서 받아오는 데이터는 언제든지 썩은상태(stale)들이 될 수 있는데, 이런 상태들을 React를 사용하는 프로젝트에서는 Redux와 같은 상태 라이브러리에 관리 할 필요가 없으므로 fresh한 데이터만 관리하기 위해 이 라이브러리가 탄생했다.
  • 그 외 react-query 이해하기
    • Query instances via ‘useQuery’ or ‘useInfiniteQuery’ by default consider cached data as stale. (쿼리 인스턴스는 useQuery와 useInfiniteQuery를 사용할 수 있는데 네트워크 요청하고, 캐시한 데이터를 모두 다 기본적으로 stale상태 즉, 오래된 상태라고 마크해준다. )
    • stale 상태의 경우, 계속해서 refetcing이 일어난다.
    • Important Defaults | TanStack Query Docs
    • fresh 데이터란? 서버로부터 막 받아온 데이터
    • stale 상태: 받아온 데이터는 처음에는 fresh하지만, 바로 out of data가 된다.
    • 어떤 네트워크 요청이냐에 따라서 얼마나 빈번히 업데이트 되느냐에 따라서 민감도를 잘 판단해서, 내가 얼마나 오랫동안 frash상태를 유지할 것인지? 얼마동안 cache를 보관할 것인지? 얼마동안 retry를 할것인지? 이런것들을 세밀하게 설정할 수있다.