[FE] 비동기 상태관리 훅을 react-query로 전환

[greenblues1190]

요구사항

• useQuery, useMutation, queryClient를 react-query로 전환
• 관련 타입을 react-query가 제공하는 타입으로 전환
• 전체 동작 테스트

기한

22.10.30

[greenblues1190]

useQuery가 반환한 객체의 refetch와 QueryClient의 invalidateQueries 메서드 비교

• Query Invalidation
• refetch vs invalidating query #2468

refetch와 invalidateQueries 모두 쿼리를 재요청하는 메서드이다. 하지만 refetch는 실행 시 항상 재요청하는 반면, invalidateQueries는 쿼리를 stale로 마크하고 옵저버가 마운트될 때 재요청한다.

그 이유는 QueryClient가 상태 변경 시 컴포넌트를 업데이트하는 방식에 있다. react-query의 내부 구현을 살펴본 결과, 내부적으로 옵저버 패턴을 사용한다는 것을 알 수 있었다. 컴포넌트는 마운트될 때 참조한 쿼리들을 구독하며 언마운트 시 구독을 해제하는 방식으로 . 본 이슈에서도 대부분의 경우 쿼리가 참조되는 컴포넌트가 마운트되었을 때만 재요청하는 것이 효율적이기 떄문에 invalidateQueries를 사용하기로 결정했다.