[TIL] React Query

리액트 쿼리의 장점으로는 너무 쉽다고한다.

이번 팀프로젝트를 시작하기 전에 쿼리를 써보기로 했다.

 

Query

어떤 데이터에 대한 요청을 의미한다. 

axios의 경우 get 요청과 비슷하다. 

DB를 요청하는 ! 뭔가를 알려주는 GET 요청과 비슷하다. 

 

const response = await axios.get('http://localhost:3000/todos')

 

Query Invalidation

( = 무효화 시킨다)

기존에 가져온 Query는 서버 데이터이기 때문에, 언제든지 변경이 있을 수 있어요. 그렇기 때문에 최신 상태가 아닐 수 있다.

그런 경우 기존의 쿼리를 무효화 시킨 후 최신화 시켜야하는데 이런 과정을 쿼리는 자동으로 해준다. 

 

 

리액트 쿼리 설치하기

yarn add react-query

 

 

import { QueryClientProvider } from "react-query";
import { QueryClient } from "react-query";

const queryClient = new QueryClient();

const App = () => {
	return (
        <QueryClientProvider client={queryClient}>
            <Router />
        </QueryClientProvider>
    );
};

export default App;

 

이렇게 이 프로젝트 전체에 queryClient가 사용된다.

 

api > todos.js

// axios 요청이 들어가는 모든 모듈
import axios from "axios";

// 조회
const getTodos = async () => {
	const response = await axios.get(`${process.env.REACT_APP_SERVER_URL}`/todos);
	return response.data;
}

export { getTodos }

 

 

 

이렇게 조회한 데이터들을 렌더링해줘야할 페이지에서 호출한다.

 

// 뿌려줄 컴포넌트 페이지에서 DB 안에 있는 todos를 들고와서 뿌려준다.
import { useQuery } from "react-query"

function TodoList() {
	const { isLoading, isError, data } = useQuery("todos", getTodos);
}

 

  두가지의 인자가 들어가는데 하나는 쿼리의 이름, 나머지 하나는 우리가 조회해 온 api를 넣어주면 된다.

이렇게 하면 만약 data안에 todos가 들어가고, 이 쿼리가 완료되지 않았을 때 isLoading이 true가 됩니다.

react-query가 isLoading을 알아서 계산해준다는 것이다.

 

import { useQuery } from "react-query"

function TodoList() {
	const { isLoading, isError, data } = useQuery("todos", getTodos);

    if (isLoading) {
        return <h1>로딩중..!</h1>;
    }
    
    if (isError) {
        return <h1>오류 발생!</h1>;
    }
}

 

 

import { useQuery } from "react-query"

function TodoList() {
	const { isLoading, isError, data } = useQuery("todos", getTodos);

    if (isLoading) {
        return <h1>로딩중..!</h1>;
    }
    
    if (isError) {
        return <h1>오류 발생!</h1>;
    }

	return (
    	<div>
        	<ul>
            	{data.filter((item) => item.isDone === !isActive).map((item) => {
                	return <li key={item.id} todo={item} isActive={isActive} />
                })}
            </ul>
        </div>
    
    )


}

 

이렇게 하면 안에 있는 데이터들을 다 화면에 그려준다.