react-query

[hmu332233]

keyword suspense,useQuery,Observer

[hmu332233]

react query 소스코드 분석 메모

기본적으로 useQuery를 사용하면 Observer와 Query가 생성됨 Query를 같은 쿼리 키를 가진 대상으로 1개 Observer는 useQuery를 사용한 수만큼 생성

Query 내부에는 Observer들을 가지고 있다.

Query가 실제로 fetch를 담당해주는 역할을 하고, 1개만 존재하기 때문에 여러 요청이 동시에 와도 내부에서 이를 컨트롤하여 fetch가 한번만 발생할 수 있도록 해줌 fetch가 끝나면 Query가 Observer들을 통해서 각 컴포넌트들이 리랜더링 될 수 있도록 해주는 것

애초에 같은 키를 기반으로 useQuery 사용시 등록되는 Query 객체는 1개이다 내부적으로 useQuery 함수 호출시 key를 기반으로 map에 Query 객체를 저장하는데 이 로직 자체가 기존에 저장된게 없어야만 동작하도록 되어있다.

(useQuery([’lecture’])를 5번 호출하면 fetch를 하기 위한 객체는 1개만 생성되고 나머지는 무시된다는 이야기) -> 이게 핵심.

같은 키에 대해서는 Query 객체가 1개이기 때문에 요청에 대한 컨트롤이 가능한 것

Query 객체는 fetch할 함수와 observer들을 알고있는데 fetch가 resolve 되기 전까지 새로운 fetch가 불리면 기존에 실행 중인 fetch만 남긴다 (이걸 통해서 fetching 상태일때 여러 컴포넌트에서 동시다발적으로 useQuery가 불려도 fetch가 추가로 되지 않는 원리)

대신, useQuery를 호출한 대상들을 observer로 저장해둔다. 이후 fetch가 끝나면 state를 갱신하고 observer들을 호출하여, 컴포넌트들을 리랜더링시키는 방식