[개발일기] 리액트 쿼리(enabled)

(2023.06.02) 간단하게 한가지라도 알면 기록하자.

리액트 쿼리는 현재 FE진영에서 서버 데이터를 땡겨올때 가장 많이 쓰이는 라이브러리다.

vercel에서 만든 swr도 많이 쓰는데 리액트 쿼리와 차이점은 이 enabled 속성이 없는 것이다.

리액트쿼리를 get방식으로 쓸때 useQuery를 이용한다. 인자는 세개를 받는다.

쿼리 키, 쿼리 함수, 마지막 인자는 옵션 객체인데 거기서 enabled 속성이 있다.

useQuery(queryKey, queryFn, optionObj);

{

  enabled: true;

}

언제 쓰느냐,

'자동으로 실행되는 걸 막을때'이다.

값이 false일땐 쿼리 함수가 실행되지 않는다.

그래서 비동기 함수가 여러개이고 동기적으로 실행해야할 때 쓰인다.

아래 예시가 있다. 첫번째 useQuery의 결과값으로 userData가 들어오지 않으면(true가 아니면)

두번째 useQuery가 실행되지 않는다.

const { data: userData } = useQuery(queryKey, queryFn1, optionObj);

const { data } = useQuery(queryKey, queryFn2, { enabled: !!userData })

또 경우에 따라 특정 데이터를 flag로 설정할 수도 있을 것이다.

 

끝.