[React] React-Query 란 무엇인가?

React-query

react-query는 서버의 값을 클라이언트에게 가져오거나, 캐싱, 값 업데이트, 에러 핸들링 등 비동기 과정을 더욱 편하게 하는데 사용된다.

 

React query의 라이프사이클

fetching -> fresh -> stale -> inactive -> delete

• fetching
  • 데이터 요청 상태
• fresh 
  • 데이터가 프레시한(만료되지 않은)상태
  • 컴포넌트의 상태가 변경되더라도 데이터를 다시 요청하지 않는다.
  • 새로고침하면 다시 fetching한다.
• stale
  • 데이터가 만료된 상태
  • 데이터가 만료되었다는 것은 서버에서 한번 프론트로 데이터를 주고 나면 그 사이에 다른 유저가 데이터를 추가 수정 삭제 등의 작업을 할 수 있기 때문에 만료되었다고 한다.
  • 컴포넌트가 마운트, 업데이트 되면 데이터를 다시 요청한다.
  • fresh에서 stale로 넘어가는 시간의 default는 0이다.
• inactive
  • 사용하지 않는 상태
  • 일정 시간이 지나면 가비지 콜렉터가 캐시에서 제거한다.
  • 기본값은 5분이다.
• delete
  • 가바지 콜렉터에 의해 캐시가 제거된 상태이다.

 

React Query의 장점

서버의 상태의 업데이트를 좀 더 용이하게 만들어 준다.

기존에 직접 만들어서 사용했던 기능들을 별도의 옵션으로 지원하여 수많은 코드를 짧은 코드로 대체할 수 있게 된다.

프로젝트 구조가 기존보다 단순해져 유지보수가 쉽고 새로운 기능을 쉽게 구축할 수 있다.

별도의 설정 없이 즉시 사용 가능하다.

캐싱을 효율적으로 관리해준다.

같은 데이터에 대한 여러번의 요청이 있을 시 중복을 제거한다.

백그라운드에서 알아서 오래된 데이터를 업데이트 해준다.

페이징처리, 지연로딩 데이터와 같은 성능 최적화를 해준다.

서버쪽 데이터를 가비지 컬렉션을 이용하여 자동으로 메모리를 관리해준다.