[React Query] refetchOnMount

최근에 프로젝트에 적용할 목적으로 리액트 쿼리에 대해 공부했었다. 리액트 쿼리는 데이터 fetching, caching, sever state 동기화 및 업데이트의 도움을 주는 라이브러리이다. 간단하게 사용법과 주가 되는 개념들만 공부하고 사용하다가 공식문서를 살펴보던 중 알게된 개념에 대해 글을 써보려고 한다.

 

refetchOnMount는 useQuery 훅의 option으로 줄 수 있는 값이다. 공식 문서의 내용을 보면 다음과 같다.

refetchOnMount: boolean | "always" | ((query: Query) => boolean | "always")
Optional
Defaults to true
If set to true, the query will refetch on mount if the data is stale.
If set to false, the query will not refetch on mount.
If set to "always", the query will always refetch on mount.
If set to a function, the function will be executed with the query to compute the value

기본값은 true이고 데이터가 stale 상태이면 컴포넌트가 마운트 될 때 refetch 작업이 발생한다.

 

컴포넌트가 마운트 된다는 것은 dom에 컴포넌트가 그려지는 것을 의미한다. 리액트의 유용한 훅인 useEffect는 마운트/언마운트의 상황을 제어하는 훅이다.

 

컴포넌트가 마운트되는 상황은 다음과 같다.

1. 최초 렌더링
2. 컴포넌트 추가
3. 페이지 전환

 

refetchOnMount 초기 데이터를 가져오는데 유용하다. 상품이 실시간으로 업데이트되지 않는 쇼핑몰과 같은  사이트를 만드는 경우 값을 false로 두고 사용해도 좋을 것 같다.