React Query 알아보기 - 1

react.. query 한테 조져지기 1초전

들어가기 

최근 React Query를 조져질 공부할 기회가 생겨 블로그에 정리해보려 합니다. 

사실 여태 Node.js 만 파왔던 제게 React 는 아직도 너무나 어렵지만.. 열심히 해볼게요 :-)

React Query 는 아예 처음 들어보진 않았고, 최근 SWR 을 써본 일이 있어서 둘의 차이나 장단점 등을 간략하게 공부했던 경험이 있습니다. 하지만 개념적으로나 사용법은 전혀 모르니 official document 와 구글 자료들을 찾아보며 하나씩 정리해보겠습니다.

...

React Query 란?

React Query는 React Application 에서 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 작업을 쉽게 만들어 주는 라이브러리 입니다.

기본적으로 리액트에는 데이터를 가져오거나 업데이트 하는 특별한 방법이 제공되지는 않습니다. 따라서 개발자가 직접 고유한 방법을 구축해서 사용하게 됩니다.

일반적으로 React Hook 을 사용하거나 상태 관리 라이브러리를 사용해 앱 전체에 비동기 데이터를 저장합니다.

하지만 대부분의 상태 관리 라이브러리는 클라이언트 상태 작업에는 적합하지만, 비동기 또는 서버 상태 작업에는 적합하지 않습니다.

왜냐하면, 서버의 상태는 전혀 다르기 때문입니다.

 

Server State

- 제어하거나 소유하지 않는 위치에서 원격으로 유지됨 (Is persisted remotely in a location you do not control or own)

- 가져오기 및 업데이트를 위해 비동기 API 필요 (Requires asynchronous APIs for fetching and updating)

- 공유 소유권을 의미, 다른 사용자가 알지 못하는 사이에 변경 될 수 있음 (Implies shared ownership and can be changed by other people without your knowledge)

- 주의를 기울이지 않으면 '오래된' 상태가 될 수 있음 (Can potentially become "out of date" in your applications if you're not careful)

React Query 장점

이제 .. 서버 상태를 관리하는 작업이 얼마나 힘든지 알게되었습니다. 

그렇다면 실질적으로 React Query 가 어떤 일을 대신 해주는 걸까요?

 

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

- 동일한 데이터에 대한 단일 요청 (중복 제거)

- 백그라운드에서 '오래된' 데이터 업데이트

- 데이터가 오래된 경우 파악

- 가능한 빨리 업데이트 반영

- 페이지네이션, lazy loading data 같은 성능 최적화

- 서버 상태의 메모리, garbage collection 매니징

- 쿼리 결과 메모

 

또한, 공식 문서에 따르면 별다른 구성 없이 즉시 사용 가능하고, 원하는 대로 사용자 커스터마이징이 가능한 최고의 서버 상태 관리 라이브러리라고 합니다.

 

추가로.. 조금 더 기술적인 면에서 보자면

 

- 복잡한 여러줄의 코드를 몇줄의 React Query logic 으로 대체 가능합니다.

- 새로운 서버 상태 데이터 소스에 연결할 걱정 없이 애플리케이션을 유지 관리하기 쉽게 만들어줍니다.

- 애플리케이션을 보다 반응성이 좋게 만들어 사용자에게 직접적인 영향을 끼칩니다.

- 잠재적으로 대역폭을 절약하고, 메모리 성능을 향상시킵니다.

설치 및 기본 세팅

npm 혹은 cdn 을 통해 사용할 수 있습니다. 

전 npm 을 사용해볼게요

$ npm i react-query
# or
$ yarn add react-query

React Query 는 React v16.8+ 와 호환되고 React Native 와도 작동한다고 합니다.

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { QueryClient, QueryClientProvider } from "react-query";
import * as serviceWorker from './serviceWorker';

const queryClient = new QueryClient();

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

react-query 를 사용하기 위해 가장 기본이 되는 App 에 react-query client 를 provide 하는 코드를 작성해줍니다.

useQuery hook

서버에서 데이터를 GET 하기 위한 hook
보통 POST, Update 는 useMutation 을 사용한다.

useQuery 를 사용하기 위해서 첫번째 파라미터에 unique한 key, 두번째 파라미터에 비동기 함수 (api 호출 함수) 를 넣어줍니다.

unique key 애플리케이션 전체에서 쿼리를 다시 가져오고, 캐싱하고, 공유하는데 사용됩니다.

const info = useQuery(['posts'], fetchPosts);

useQuery는 비동기로 작동해 한 컴포넌트에 여러개가 존재한다면 동시에 useQuery 가 실행됩니다. (enabled 를 사용하면 동기적으로 실행 가능)

 

useQuery return 

useQuery의 반환 값은 쿼리에 대한 모든 정보를 포함하고 있습니다.

isLoading or status === 'loading'	query 가 아직 아무런 데이터를 가지지 못함
isErroror status === 'error'	query 에 오류가 발생함
isSuccessorstatus === 'success'	query 가 성공했으며, 데이터를 사용할 수 있음
error	query 가 isError 인 경우 error property를 사용할 수 있음
data	query 가 success 인 경우 데이터를 data property 로 사용할 수 있음

대부분의 query는 isLoading 상태를 확인한 다음 isError 상태를 확인하고, 마지막으로 데이터를 사용할 수 있다고 가정하여 성공적인 상태를 렌더링하는 것으로 충분합니다.

components/Post.js

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

import { fetchPosts } from '../libs/api';

const Post = () => {
	const { isLoading, isError, data, error } = useQuery(['posts'], fetchPosts);

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

	if (isError) {
		return <span>Error: {error.message}</span>;
	}
	
	return (
		<ul>
      {data.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
	);
};

export default Post;

libs/api.js

import axios from 'axios';

export const client = axios.create({
	baseURL: 'https://jsonplaceholder.typicode.com'
});

export const fetchPosts = async () => {
	const response = await client.get(`/posts`);
	
	return response.data;
}

api 는 https://jsonplaceholder.typicode.com/ 에서 json fake api 를 호출해봤습니다.

 

처음 데이터를 fetch 하는 과정에서는 isLoading 이 true 임으로 Loading.. span 이 뜹니다.

console 에 isLoading 을 찍어보시면 처음에 true 였다가 fetch 완료 후 false 로 바뀌는 걸 보실 수 있습니다.

data 가 성공적으로 들어오면, 이렇게 title이 정상적으로 보이게 됩니다.

마무리

지금까지 react-query 에 대한 간단한 개념과 설치, 기본 hook 사용법을 알아봤습니다.

아직 낯선 개념이라 그런지 신기하고 어려운데 docs 를 차근차근 읽어보며 다른 Hook 들도 공부해봐야겠습니다.