React-Query

• 사용 함수

  • useQuery, QueryClient, QueryClientProvider
  • import {useQuery, QueryClient, QueryClientProvider} from ‘react-query’

• 초기 세팅

  1. App 컴포넌트를 <QueryClientProvider client={queryClient}> 로 감싸준다.

     const queryClient = new QueryClient();
     
     root.render(
     	<>
     		<QueryClientProvider client={queryClient}>
     			<ThemeProvider theme={theme}>
     				<App />
     			</ThemeProvider>
     		</QueryClientProvider>
     	</>,
     );
     

  2. api fetching을 다른 파일(api.ts)에서 진행하고, json 파일을 return 받는다

  3. useQuery() 함수를 사용한다.

  • 인자로는 data의 이름과, fetch 함수를 준다.
  • 최소 반환은 isLoading<boolean> 값과 data<fetch 함수의 return 타입>가 있다.
  4. 사용 예시

     • api.ts

       export function fetchCoins() {
       	return fetch('<https://api.coinpaprika.com/v1/coins>').then((res) =>
       		res.json(),
       	);
       }
       

     • Coins.tsx

       const { isLoading, data } = useQuery<ICoin[]>(['allCoins'], fetchCoins);
       

• 특이점

  • useQuery를 통해 넘겨주는 인자(data 이름, fetch 함수)와 useQuery를 통해 받는 정보 (isLoading과 data)에는 주의할 사항이 있다.

    • useQuery(data 이름, fetch 함수) 에서 data 이름은 고유해야 하고, fetch 함수에 인자가 필요하다면 단순 함수 이름만이 아닌, () ⇒ 함수이름(인자)의 형식으로 전달해야한다.
    • const {isLoading, data} = useQuery(data 이름, fetch 함수) 에서 isLoading과 data가 여러개라면 js 문법을 통해 이름을 할당할 수 있다. (isLoading: {이름}, data: {이름} 을 통해 할당 가능)

    const { isLoading: infoLoading, data: infoData } = useQuery<IInfoData>(
    		['info', coinId],
    		() => fetchCoinInfo(coinId!),
    	);
    const { isLoading: tickersLoading, data: tickersData } = useQuery<IPriceData>(
    		['tickers', coinId],
    		() => fetchCoinTickers(coinId!),
    	);
    const loading = infoLoading || tickersLoading;
    

    • useQuery의 세번째 인자로 { refetchInterval: 시간(ms) }을 줄 수 있다. 해당 인자를 통해 useQuery에서 시간 주기에 따라 자동으로 데이터를 불러온다.

• 느낀점

  • useEffect 와 async await 함수를 쓰면서 useState에 저장하는 과정을 모두 한번에 깔끔한 코드로 처리할 수 있다.
  • 로딩된 데이터는 캐시(cache)에 저장되기 때문에 다음에 또 로딩하지 않아도 된다.