리액트 쿼리가 왜 필요할까? (공홈 번역)

리액트 쿼리가 왜 필요한지. 다른 많은 상태 관리 라이브러리와는 어떤 다른 점이 있는지 공식 홈페이지의 개요를 읽어보며 알 수 있었습니다. 영어로 되어있는 홈페이지 내용을 번역해 보았는데, 좀 더 이해하기 쉬운 방향으로 해석하느라 모든 단어 하나하나를 해석하지는 않았습니다.

Overview

리액트 쿼리는 React를 위한 데이터-페칭 라이브러리 정도로 생각되곤 하지만, fetching 뿐 아니라 cashing, 서버 데이터와의 동기화 및 서버 데이터 업데이트까지 수행합니다.

motivation

기본적으로 React 어플리케이션은 컴포넌트에서 데이터를 fetching 하거나 updating 하는 방법을 제공하지 않으므로, 개발자는 data와 fetching 하는 방법을 고안해야 합니다. 이 말은 React hook을 사용해서 컴포넌트 베이스의 state와 effect를 결합하거나, 데이터를 저장하고 동기화하는 일반적인 상태 관리 라이브러리를 사용해야 함을 의미합니다.

전통적인 대부분의 상태 관리 라이브러리는 클라이언트 상태에서는 잘 동작하지만, 비동기적이거나 서버 상태에서는 잘 동작하지 않습니다. 서버 상태는 완전히 다르기 때문입니다.

서버 상태는

• 개발자가 컨트롤하거나 소유할 수 없는 곳에서 원격으로 유지됩니다
• feching / updating 을 위해 비동기 API가 필요합니다
• 보통 공동 소유권을 가지고 다른 사람이 당신이 모르는 사이 변경할 수 있습니다
• 주의하지 않으면 잠재적으로 오래된 상태가 될 수도 있습니다

어플리케이션에서 서버 상태의 특성을 알게된다면, 다음과 같은 과제들이 발생할 것입니다.

• Cashing (아마도 프로그래밍에서 가장 어려운 것)
• 동일한 데이터에 대한 중복된 요청을 단일 요청으로 변경
• 오래된 데이터를 업데이트
• 데이터가 언제 오래되는지 파악하는 것
• 데이터 업데이트를 빠르게 반영
• 페이지네이션이나 lazy loading 같은 성능 최적화
• 메모리와 서버 상태 가비지 콜렉션의 관리
• 구조적 공유를 통한 쿼리 결과 memoizing

당신이 이 리스트를 보고 압도당하지 않는다면 당신은 이미 모든 서버 상태 문제를 해결할 수 있다는 것을 의미합니다. 그러나 당신이 평범한 사람이라면 이러한 과제들을 전부, 혹은 대부분 다뤄보지 않았을테고 수박 겉핥기만 해봤을 것입니다.

리액트 쿼리는 서버 상태를 다루는 가장 좋은 라이브러리입니다. 특별한 설정없이도 놀라울 정도로 잘 작동하고, 어플리케이션 성장에 따라 선호에 맞춰 커스텀화할 수도 있습니다.

리액트 쿼리는 서버 상태에 대한 많은 과제들을 해결하고, 어플리케이션의 데이터를 컨트롤하는 것에 도움을 줄 수 있습니다.

더 기술적으로 말하자면 리액트 쿼리는 다음과 같은 역할을 수행합니다.

• 어플리케이션에서 복잡한 많은 코드들을 제거하고, 단 몇줄의 리액트 쿼리 로직으로 대체할 수 있습니다.
• 새로운 서버 데이터 소스와 연결하는 것에 대한 걱정없이 어플리케이션을 더 유지보수하기 쉽게, 새로운 기능을 추가할 수 있도록 지원합니다.
• 어플리케이션이 더 빠르고 반응성이 좋게 느껴지도록하여 사용자 경험을 향상시킬 수 있습니다.
• 대역폭을 절약하고 메모리 성능을 향상시킬 수 있습니다.

코드 예시

아래 예제에서 리액트 쿼리 깃허브 프로젝트 자체에 대한 깃허브 통계를 가져오는 기본적인 형식의 리액트 쿼리 코드를 볼 수 있습니다.

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

const queryClient = new QueryClient()

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

function Example() {
  const { isLoading, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: () =>
      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>
  )
}

위의 내용을 보면 리액트 쿼리는 복잡한 코드들을 더 간단하게 작성할 수 있게 하고, 서버 상태를 직접 컨트롤하는 것에 도움을 준다는 것을 알 수 있습니다. 확실히 리액트 쿼리로 fetching을 했을 때 코드가 더 간결하고 가독성이 높아졌었던 경험이 있습니다. 공식 홈페이지 DOCS에서 다양한 가이드들과 API 레퍼런스들도 잘 설명되어 있는데 다음에는 그 중 중요한 부분들을 골라서 포스팅해보겠습니다.

참고
https://tanstack.com/query/v4/docs/overview#motivation