리액트 쿼리(over view)

리액트 쿼리란?

• 리액트에서 데이터를 주고 받을 수 있도록 도와주는 라이브러리
  (React를 위한 강력하고 성능 좋은 데이터 동기화)

React Query는 종종 React에 없는 데이터 불러오기 라이브러리로 묘사되지만, 좀 더 기술적인 용어로 표현하자면 React 애플리케이션에서 서버 상태를 불러오고, 캐싱하고, 동기화하고, 업데이트하는 작업을 손쉽게 해줍니다.

기본적으로 React 애플리케이션은 컴포넌트에서 데이터를 가져오거나 업데이트하는 확실한 방법을 제공하지 않기 때문에 개발자가 직접 데이터를 가져오는 방법을 구축해야 합니다. 이는 일반적으로 React 후크를 사용해 컴포넌트 기반 상태와 효과를 조합하거나, 보다 범용적인 상태 관리 라이브러리를 사용해 앱 전체에 비동기 데이터를 저장하고 제공하는 것을 의미합니다.

대부분의 기존 상태 관리 라이브러리는 클라이언트 상태 작업에는 적합하지만 비동기 또는 서버 상태 작업에는 적합하지 않습니다. 서버 상태는 완전히 다르기 때문입니다. 우선, 서버 상태는

사용자가 제어하거나 소유하지 않는 위치에서 원격으로 유지됩니다.
가져오기 및 업데이트에 비동기 API가 필요합니다.
공유 소유권을 의미하며 사용자 모르게 다른 사람이 변경할 수 있음
주의하지 않으면 잠재적으로 애플리케이션이 '오래된' 상태가 될 수 있음
애플리케이션에서 서버 상태의 특성을 파악하고 나면 다음과 같은 더 많은 문제가 발생할 수 있습니다:

캐싱... (아마도 프로그래밍에서 가장 어려운 일)

• 동일한 데이터에 대한 여러 요청을 단일 요청으로 중복 제거하기
• 백그라운드에서 "오래된" 데이터 업데이트하기
• 데이터가 "오래된" 시기 파악하기
• 가능한 한 빨리 데이터에 업데이트 반영
• 페이지 매김 및 지연 로딩 데이터와 같은 성능 최적화
• 서버 상태의 메모리 및 가비지 컬렉션 관리
• 구조적 공유를 통한 쿼리 결과 메모화

React Query는 서버 상태 관리를 위한 최고의 라이브러리 중 하나입니다. 별도의 설정 없이 바로 사용할 수 있으며, 애플리케이션이 성장함에 따라 원하는 대로 커스터마이징할 수 있습니다.

React Query를 사용하면 서버 상태의 까다로운 도전과 장애물을 물리치고 극복할 수 있으며, 서버가 사용자를 제어하기 전에 앱 데이터를 제어할 수 있습니다.

좀 더 기술적으로 설명하자면, React Query는:

• 애플리케이션에서 복잡하고 오해의 소지가 있는 여러 줄의 코드를 제거하고 몇 줄의 React Query 로직으로 대체할 수 있습니다.
• 새로운 서버 상태 데이터 소스를 연결할 걱정 없이 애플리케이션의 유지보수를 개선하고 새로운 기능을 더 쉽게 구축할 수 있습니다.
• 애플리케이션의 속도와 반응성이 그 어느 때보다 빨라져 최종 사용자에게 직접적인 영향을 미칩니다.
• 잠재적으로 대역폭을 절약하고 메모리 성능을 향상시킬 수 있습니다.

---

코드 사용 예제

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'

const queryClient = new QueryClient()

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  )
}

function Example() {
  const { isLoading, error, data } = useQuery('repoData', () =>
    fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res =>
      res.json()
    )
  )

  if (isLoading) return 'Loading...'

  if (error) return 'An error has occurred: ' + error.message

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{' '}
      <strong>✨ {data.stargazers_count}</strong>{' '}
      <strong>🍴 {data.forks_count}</strong>
    </div>
  )
}

---