React-query

 

 

 

react-query

React 애플리케이션에서 서버 상태를 효율적으로 가져오고, 캐시하고, 동기화하고, 업데이트하는 작업을 쉽게 만들어주는 라이브러리

데이터 페칭, 캐싱, 동기화, 업데이트와 같은 작업들을 쉽게 처리할 수 있게 해주며, 이러한 기능을 통해 개발자는 서버 상태 관리에 대한 복잡성을 크게 줄일 수 있다

 

주요 기능

• 자동 데이터 리프레쉬
  • 애플리케이션의 포커스가 변경되거나 네트워크가 다시 연결될 때 자동으로 데이터를 새로고침(refresh)할 수 있다
• 백그라운드 데이터 동기화
  • 사용자 인터랙션이 없는 동안에도 데이터를 백그라운드에서 동기화할 수 있다
• 캐싱 및 공유 쿼리 결과
  • 동일한 쿼리에 대한 여러 요청이 하나의 캐시된 결과를 공유할 수 있어, 불필요한 네트워크 요청을 줄일 수 있다
• 페이지네이션과 무한 스크롤
  • 페이지네이션과 무한 스크롤을 쉽게 구현할 수 있는 기능을 제공
• 쿼리 상태 관리
  • 로딩, 에러, 성공 상태 등을 쉽게 관리하고 UI에 반영할 수 있다

 

사용 예시

react-query를 사용하여 데이터를 가져오고 상태를 관리하는 기본적인 예

import React from 'react';
import { useQuery } from 'react-query';

async function fetchUserData(userId) {
  const response = await fetch('https://api.example.com/user/' + userId);
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
}

function UserProfile({ userId }) {
  const { data, error, isLoading } = useQuery(['userData', userId], () => fetchUserData(userId));

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>An error has occurred: {error.message}</div>;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>Email: {data.email}</p>
      // ... other user data
    </div>
  );
}

 

위 코드에서,

useQuery 훅은 유저 데이터를 가져오기 위해 사용되며,

첫 번째 인자로 쿼리의 고유 키(['userData', userId])와 데이터를 가져오는 비동기 함수(fetchUserData)를 받는다

useQuery는 데이터, 로딩 상태, 에러 상태 등을 관리하며, 이를 컴포넌트에서 쉽게 사용할 수 있게 해준다

 

결론

react-query는 서버 상태 관리의 복잡성을 대폭 줄여주고,

애플리케이션의 성능을 향상시키는 강력한 도구다

데이터 페칭, 캐싱, 상태 관리 등을 자동으로 처리해주므로, 개발자는 UI 구현과 사용자 경험 개선에 더 집중할 수 있다