[React] React-Query 라이브러리가 무엇인지 알아보자

목차

 

오늘은 프로젝트를 하면서 리액트 쿼리에 대해 접하게 되었다. 말하는 감자인 나는 당연히 모르기 때문에 이번 기회에

정리해보고자 한다..

 

리액트 쿼리의 필요성

 

캐시

• 동일한 데이터에 반복해서 접근해야 하거나 많은 연산이 필요한 일일때, 결과를 빠르게 이용하고자 성능이 좋은 혹은 가까운 곳에 저장하는 것
• 즉 캐시는 컴퓨터의 성능을 향상 시키기 위해 사용되는 메모리를 말한다.

캐싱

• 이 캐시 영역으로 데이터를 가져와서 접근하는 방식을 말한다.
• 예를 들어, 속도가 느린 디스크의 데이터를 속도가 빠른 메모리로 가져와 메모리상에서 읽고 쓰는 작업을 수행한다.

브라우저 캐시

• 브라우저는 이미지, 비디오 뿐만 아니라 CSS 와 Javascript 등 정적 리소스를 로컬에 저장하여 성능을 향상시킨다.

장점: 브라우저 캐싱을 통해 정적 자산을 사용자의 하드 디스크에 저장한다면, 서버에 접속해 파일을 다운로드 하는 것보다.  그래서 훨씬 더 빠르게 페이지를 렌더링할 수 있다.

 

단점: 캐시의 만료기간은 웹사이트에 의해 결정되는데 브라우저 캐시의 만료 기간이 긴 경우, 사용자가 항상 최신 정보를 볼 수 없게 만들어 사용자 경험을 저하시킬 수 있다.

 

이러한 캐싱의 장단점을 잘 이용하기 위해 react-query를 사용하는 것이다.. 

 

또한 클라이언트(서비스를 제공하는 컴퓨터) 데이터에 비해 서버(서비스를 제공하는 컴퓨터) 데이터는 전역적으로 관리해야 해야 되기 때문에 Client data 와 Server data 를 완전히 분리할 수 있게 하는 react-query를 사용한다.

 

즉, Client 데이터는 상태 관리 라이브러리가 관리하고, Server 데이터는 React-Query가 관리하는 구조라고 생각하면 된다!! 이를 통해 우리는 Client 데이터와 Server 데이터를 온전하게 분리할 수 있다.

 

 

리액트 쿼리의 간단 사용법

 

설치

$ npm i @tanstack/react-query
# or
$ pnpm add @tanstack/react-query
# or
$ yarn add @tanstack/react-query

 

간단한 예

function Todos() {
  const { status, data, error } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodoList,
  })

  if (status === 'pending') {
    return <span>Loading...</span>
  }

  if (status === 'error') {
    return <span>Error: {error.message}</span>
  }

  // also status === 'success', but "else" logic works, too
  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  )
}

 

참고

https://tech.osci.kr/react-query/#comment-8258

React-Query 도입을 위한 고민 (feat. Recoil) - 오픈소스컨설팅 테크블로그 - 강동희