react query는 위의 것과 무엇이 다른가?

기존요청방식 vs react-query 요청 방식

기존요청방식: isLoading과 data를 state로 가지며 서버 데이터를 불러온 후 상태 update
react-query: useQuery훅을 이용해 반환받은 isLoading과 data사용

👍 코드의 길이는 물론 가독성까지 좋아보인다 👍

프로젝트에 도입해야하는 이유
1. 서버 데이터 캐싱
2. 데이터 패칭 시 로딩,에러 처리를 한 곳에서 처리 가능
3. prefetching, retry 등 다양한 옵션
4. 쉬운 상태 관리.

라이프 사이클

• fetching - 데이터 요청 상태

• fresh - 데이터가 프레시한(만료되지 않은) 상태.

  • 컴포넌트의 상태가 변경되더라도 데이터를 다시 요청하지 않는다.
  • 새로고침 하면 다시 fetching 한다.

• stale - 데이터가 만료된 상태

  • 데이터가 만료되었다는 것은 서버에서 한번 프론트로 데이터를 주면 그 사이에 다른 유저가 데이터를 추가, 수정, 삭제 등등 할수있기 때문에 만료되었다고 한다.(최신화가 필요한 데이터)
  • 컴포넌트가 마운트,업데이트되면 데이터를 다시 요청한다.
  • fresh에서 stale로 넘어가는 시간 -> 기본값 0

• inactive - 사용하지 않는 상태.

  • 일정 시간이 지나면 가비지 콜렉터가 캐시에서 제거함.
  • 기본값 5분

• delete - 가비지 컬렉터에 의해 캐시에서 제거된 상태

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