2023. 10. 13. 18:05ㆍ카테고리 없음
Nextjs 13 의 app router 에서는 server component 와 client component 를 각각 따로 지원하는데
만약 간단한 Data fetching 만이 목적이라면 굳이 React-Query 를 사용하지 않는게 좋다고 생각한다.
그런데 React-Query의 기능들을 몇가지 접하다보니 인기가 있는 이유를 새삼 깨닫는 중이다
그중 React-Query 의 가장 기본이라 볼 수 있는 useQuery 에 대해 특히 그 옵션들에 대해 깊게 파헤쳐보자
기본세팅은 남자답게 알아서 했다는 전제하에 설명하므로 provider 로 감싸는 정도는 하고 읽기를 바랍니다
공식문서를 보면 useQuery 에 required 가 붙어있는 두가지 옵션이 있다.
두개 옵션은 무조건 쓰라는 말인데.
1. queryKey
쉽게 설명하자면 queryKey 의 경우 Data 를 호출해 올 때 '나 앞으로 이름으로 이 데이터를 앞으로 부를꺼야' 라고 칭하는 것과 같다. ( 아님말고 )
그럼 다음에 다른 컴포넌트에서 똑같은 데이터를 호출 할 때 만약 데이터가 캐싱 되어있다면 다시 네트워크에 요청을 하는 것이 아니라 백그라운드에서 로딩없이 캐싱된 데이터를 불러올 수 있다.
( cache 모르면 그냥 데이터나 값을 미리 복사해 놓는 임시 저장소 라 생각하자 )
배열 안에 문자열 형식으로 저장하며 동적으로 생성하고싶다면 뒤에 id 값 같은걸 같이 줘서 개별적으로 호출도 가능하다
2. queryFn
두번째 필수 옵션으로 queryFn 이 있는데 쉽게 말하면 여기서 데이터 패칭하는 함수를 쓰라는 소리다.
이 두개만 사용해줘도 useQuery 에 기본으로 걸려있는 옵션들 덕분에 자동으로 데이터를 caching 해주거나 refetch 해준다.
하지만 우린 프로니까 옵션들을 다 파해쳐 봐야겠지.
3. staleTime
staleTime - 값으로 숫자를 받는데 설정한 시간초 동안 값이 fresh 상태로 유지된다는 말이다.
ex) 어떤 도라이가 내가만든 기능을 미친듯이 광클해서 내 서버에 부하가 걸리는 일이 없도록 한번 준 데이터가 fresh 상태라면 한번준 데이터 그대로 다시 주는 시간.
default : 0
만약 react-query 의 5가지 상태를 모른다면 읽어보고 아님 넘어가자
- fetching : 요청 상태인 쿼리. 대기중
- fresh : 새롭게 추가된 쿼리 인스턴스이며, 만료되지 않은 쿼리. 컴포넌트의 mount, update 시에 데이터를 재요청하지 않음(항상 캐시된 데이터를 가져옴)
- stale : 데이터 패칭이 완료되어 만료된 쿼리. stale 상태의 같은 쿼리를 useQuery로 재호출하여 컴포넌트 마운트를 한다면 캐싱된 데이터가 반환됨.
- inactive : 비활성 쿼리로써 사용하지 않음. 5분 뒤에 가비지 콜렉터가 캐시에서 제거함.
- delete : 가비지 콜렉터에 의하여 캐시에서 제거된 쿼리.
4. cacheTime
cacheTime 도 마찬가지로 값으로 숫자를 받는데 아까 말했듯이 RQ ( react-query ) 는 데이터를 캐싱해주는데 그 캐싱해주는 시간을 정해준다.
* 호출한 데이터를 보고있으면 Observer 가 보고있다 생각하면 되는데 그때는 cacheTime 설정한 시간이 흐르지 않고 Observer 가 사라지면 cacheTime 이 지난 후 GC ( 가비지컬렉터 ) 에 의해 삭제된다.
default : 300000
5. refetchInterval
refetchInterval 도 숫자를 값으로 받는데 설정한 시간 지나면 데이터 refetching 해준다.
ex) 주식창보면 그래프 왔다갔다 하는거 생각하면 이해가 잘되더라.
refetchIntervalInBackground 는 refetchInterval 이거 브라우저에 focus 하고 있지 않아도 계속해서 데이터 패칭할까말까 하는 설정
default : false
6. enabled
enabled 는 생각보다 자주 사용하게 되는 옵션인데 useQuery 로 queryKey 랑 queryFn 을 설정해주면 해당 컴포넌트가 Mount 될 때 데이터를 불러올지 말지 정하는 옵션이다.
만약 onClick 이벤트가 걸리면 데이터를 불러오고 싶은데 페이지 Mount 되자마자 불러와지면 난감하니까.
또 개발중인 페이지 규모가 좀 있으면 useQuery 로 어떤 id 값을 불러왔는데 이 id 값을 이용해서 또 데이터를 불러오는 경우가 간혹 있는데
이런식으로 하면 된다더라. 뭔지는 직접 찾아보시길.
7. select
select 옵션은 useQuery 의 경우 많은 리턴값 중에 data 값을 반환하기 전에 설정한 함수로 가공하고 리턴해주는 옵션이다.
백엔드에서 데이터 덜 가공해서 보내주면 내 입맛대로 가공해서 리턴하면 된다.
8. initialData
initialData 는 useQuery 의 값을 미리 정해주는 함수인데 만약 다른 컴포넌트에서 다른 queryKey 로 데이터를 호출 하고 cache 가 아직 남아있다면 initialData 를 이용해 데이터의 초기값을 설정해 줄 수 있다.