[React] React Query에 대한 소개와 사용 환경 설정

안녕하세요. J4J입니다.

 

이번 포스팅은 React Query에 대한 소개와 사용 환경 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

React Query란?

 

React Query는 서버 상태 (server state)를 가져오며 동시에 캐싱 처리, 동기화 처리, 업데이트 처리를 할 수 있도록 도와주는 라이브러리입니다.

 

조금 더 쉽게 표현하자면 서버에 API 요청, 즉 비동기 요청을 할 때 보다 편리한 작업들을 추가 제공해준다고도 말씀드릴 수 있습니다.

 

 

 

React를 이용해 개발하다 보면 서버 상태를 관리하기 위한 여러 가지 작업들을 수행하게 됩니다.

 

개인적으로 가장 많이 처리했던 반복 작업은 서버에 API 요청을 보낼 때 API 요청이 처리되고 있는지에 대한 확인을 하는 로딩 중 처리가 있습니다.

 

어렵지 않은 코드 작업이지만 관련 데이터를 표시하기 위한 추가 Hook 작업이 수행되며 또한 관리도 이루어져야 합니다. 

 

간단하게 코드로 표현하면 다음과 같이 보여질 수 있습니다.

 

import * as React from 'react';
import axios from 'axios';

interface Iperson {
    id: number;
    name: string;
    phone: string;
    age: number;
}

const BasicLoading = (): JSX.Element => {

    const [isLoading, setIsLoading] = React.useState<boolean>(false); // 로딩 state
    const [persons, setPersons] = React.useState<Iperson[]>([]); // person state

    React.useEffect(() => {
        getPersons();
    }, [])

    const getPersons = async () => {
        setIsLoading(true); // 로딩 중 체크
        const res = await axios.get('http://localhost:8080/persons'); // API 호출

        if(res) {
            setIsLoading(false); // 로딩 중 체크 해제
            setPersons(res.data); // 결과값 적재
        }
    }

    return (
        <div>
            {isLoading 
                ? <h2>Loading ...</h2>
                : persons.map((person) => {
                    return (
                        <div key={person.id}>
                            <h2>{person.id}: {person.name}</h2>
                        </div>
                    )
                })}
        </div>
    )
}

export default BasicLoading;

 

 

반응형

 

 

하지만 React Query를 사용하게 된다면 여러 불필요한 작업들을 제거해줄 수 있습니다.

 

React Query에서는 이런 기능들을 기본적으로 제공해주기 때문에 개발자는 추가 작업들을 할 필요 없이 데이터 페칭 작업만 신경 쓰면 됩니다.

 

React Query를 이용하여 위와 동일한 결과가 나오는 코드를 구현하면 다음과 같습니다.

 

import * as React from 'react';
import axios from 'axios';
import { useQuery } from 'react-query';

interface Iperson {
    id: number;
    name: string;
    phone: string;
    age: number;
}

const QueryLoading = (): JSX.Element => {

    const getPersons = () => {
        const res = useQuery(['persons'], () => axios.get('http://localhost:8080/persons')); // API 호출

        // 로딩 중일 경우
        if(res.isLoading) {
            return (
                <h2>Loading...</h2>
            )
        }

        // 결과값이 전달되었을 경우
        if(res.data) {
            const persons: Iperson[] = res.data.data;

            return (
                persons.map((person) => {
                    return (
                        <div key={person.id}>
                            <h2>{person.id}: {person.name}</h2>
                        </div>
                    )
                })
            )
        }
    }

    return (
        <div>
            {getPersons()}
        </div>
    )
}

export default QueryLoading;

 

 

 

이처럼 React Query는 로딩 작업 뿐만 아니라 캐싱, 메모이제이션, API 중복 호출 방지 등 다양한 기능들을 제공해주고 있습니다.

 

그렇기 때문에 개발자에게 더 효과적인 개발 경험을 제공해주는 라이브러리라고 생각합니다.

 

 

 

사용 이점

 

React Query 공식 문서를 참고하면 React Query를 사용할 경우 다음과 같은 영향을 미칠 수 있다고 합니다.

 

• 복잡하고 오해가 발생될 수 있는 코드들을 React Query가 대체해줄 수 있음
• 새로운 서버 상태 연결에 대한 걱정 없이 관리하기 쉽고 새로운 기능을 더 쉽게 구축할 수 있음
• 사용자들에게 서비스가 빠르고 반응성이 좋다고 느껴질 수 있도록 해줌
• 메모리 성능을 높이는데 도와줌

 

 

728x90

 

 

환경 설정

 

React Query를 사용할 수 있도록 해줘야 하는 환경 설정은 간단합니다.

 

이번 글에서는 환경 설정하는 방법만 알고 여러 기능들의 자세한 사용 방법은 이후에 차례대로 작성해보도록 하겠습니다.

 

 

 

[ 1. 패키지 설치 ]

 

$ npm install react-query
$ npm install -D @types/react-query

 

 

 

[ 2. QueryClientProvider 등록 ]

 

index.tsx 파일을 다음과 같이 수정해주시면 됩니다.

 

import * as React from 'react';
import ReactDom from 'react-dom';
import { QueryClient, QueryClientProvider } from 'react-query';
import App from './App';

const queryClient = new QueryClient(); // queryClient 생성

ReactDom.render(
    // App에 QueryClient 제공
    <QueryClientProvider client={queryClient}>
        <App />
    </QueryClientProvider>, 
    document.querySelector('#root')
);

 

 

 

 

 

 

 

 

이상으로 React Query에 대한 소개와 사용 환경 설정하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.