TIL | 잊기 전에 다시한번! useQuery의 흐름

Next.js에서 TQ복습을 하다가 나온 내용이다.
useQuery를 이해하는 중요한 내용이라서 다시한번 정리해본다.

예시 코드

"use client"

import { useQuery } from "@tanstack/react-query";
import React from "react";

const TodoListPage = () => {
	const { data: todos } = useQuery({
      queryKey: ["todos"],
      queryFn: () => fetch("http://localhost:4000/todos").then((res) => res.json()),
    });
  
  	console.log(todos); // 주목
  
    return <div></div>
};

export default TodoListPage

여러 공식 문서들에 등장하는 예시인 투두리스트 만들기다.
위와 같이 useQuery의 가장 기본적인 사용방법이다. 그리고 나서 콘솔로그를 확인해 보면 아래와 같은 결과를 확인할 수 있다.

db.json에 이미 4개의 데이터가 기록되어 있기기에 4개의 값이 잘 나타나고 있다.

여기서 useQuery를 이해하기위해서 확인해야할 부분은 자료값 위의 undefined이다.

콘솔창에 보이는것처럼 처음부터 db의 자료값이 나타나는게 아니고 undefined 후에 자료가 나타난다.

useQuery는 서버에서 데이터를 가져오는 역할을 하는데, 처음부터 무조건적으로 db의 자료를 가져오는 것이 아니다.

1. 캐시컨텍스트에 queryKey로 지정한 데이터가 있는지부터 확인한다.
   새로고침하면 당연히 캐시컨텍스트에 데이터가 없다. 그래서 undefined가 먼저 나타나는 것이다.

2. 캐시컨텍스트에 데이터가 없는 것을 확인했기에 queryFn이 실행되는 것이다.

3. db의 데이터를 캐시컨텍스트에 저장하고 리렌더링이 된다.

   • 캐시컨텍스트의 값이 바꼇다는 것은 전역상태가 바꼈다는 것.
   • 전역상태가 바꼈다는 것은 state가 바꼈다는 것.
   • state가 바꼈다는 것은 리렌더링이 된다는 것.

4. 리렌더링이 되었기 때문에 로직이을 다시 시작한다.
   이번에는 캐시컨텍스트에 queryKey 저장된 데이터가 있기에 이 데이터들을 불러오는 것이다.

콘솔창에 출력되는 값들에 대해서는 그렇구나~ 하고 넘어갈때도 있지만, 이렇게 로직의 흐름을 보여주기 때문에 꼼꼼하게 확인하고 해석해볼 필요가 있다!