logo

[ React-Query 소스코드 분석] "Refetch" vs "invalidateQueries"

language-logoReactJS
language-logoReact Query

• React-Query의 Refetch와 InvalidateQueries의 차이를 이해하기 위해 내부 구조를 살펴본 결과, 컴포넌트의 마운트가 해제되지 않는다면 두 메서드를 호출하는 것에 큰 차이가 없다는 결론을 내렸다.
• React-Query의 QueryClient는 QueryCache의 데이터가 주입되는 그릇으로, 쿼리 결과의 캐시와 뮤테이션 결과의 캐시를 관리하며, 이 캐시 데이터를 위한 요청, 조회, 설정 등이 가능한 메서드들을 제공한다.
• `QueryCache`는 시리얼라이즈된 쿼리 키를 기반으로 쿼리를 저장하고, 이를 구독하는 리스너들에게 알리는 클래스로, Redux의 `Flux 패턴`을 통해 단방향 notifying을 진행한다.
• `Query`는 쿼리 처리 결과를 생성하는 클래스로, 쿼리의 상태값과 요청 상태, 중복 요청 처리, 쿼리 취소, 재시도 등의 메서드를 포함하며, 쿼리 변경 시 관찰자들에게 변경사항을 전파하는 기능을 가지고 있다.

thumbnail
북마크
공유하기
신고하기
18분 분량
조회수 838
profile-imagedevAnderson
일 년 전
Copyright © 2025. Codenary All Rights Reserved.