TIL-24.05.10

 

 

리액트 쿼리를 사용하여 데이터 가져오기

리액트 쿼리(React Query)는 리액트 애플리케이션에서 데이터를 관리하고 쉽게 가져오기 위한 라이브러리입니다. 이 라이브러리는 서버 데이터, 캐시 데이터, 로컬 데이터 등을 효과적으로 관리하고 캐싱하여 성능을 향상시키며, 비동기 데이터를 쉽게 처리할 수 있습니다.

리액트 쿼리를 사용하여 데이터를 가져오는 과정은 다음과 같습니다:

1. Query 생성: `useQuery` 훅을 사용하여 데이터를 가져올 쿼리를 생성합니다. 이 때 쿼리의 키(key)와 비동기 함수를 제공합니다.

   const { isLoading, data, error } = useQuery('myData', fetchDataFunction);

 

 

 

2. 데이터 가져오기: 비동기 함수(fetchDataFunction)를 제공하여 데이터를 가져옵니다. 리액트 쿼리는 이 함수를 실행하고, 데이터를 캐싱하고 관리합니다.

const fetchDataFunction = async () => {
     const response = await fetch('https://api.example.com/data');
     const data = await response.json();
     return data;
   };

 

 

 

3. 데이터 사용하기: `isLoading`, `data`, `error` 등의 상태를 이용하여 데이터를 UI에 표시합니다.

   if (isLoading) {
     return <div>Loading...</div>;
   }

   if (error) {
     return <div>Error: {error.message}</div>;
   }

   return (
     <div>
       {data.map(item => (
         <div key={item.id}>{item.name}</div>
       ))}
     </div>
   );

 

 

 

리액트 쿼리를 사용하면 데이터 가져오기와 관리를 매우 간편하게 처리할 수 있으며, 캐싱과 상태 관리를 자동으로 처리하여 코드를 간결하게 유지할 수 있습니다.