• 티스토리 홈
  • 프로필사진
    redpome
  • 방명록
  • 공지사항
  • 태그
  • 블로그 관리
  • 글 작성
redpome
  • 프로필사진
    redpome
    • 분류 전체보기 (50)
      • 내일배움캠프 (23)
      • 웹개발 지식 (2)
      • 프로그래머스 (8)
      • React (7)
      • 코딩테스트 (1)
      • UI-UX (1)
      • 타입스크립트 (2)
      • Next.js (3)
  • 방문자 수
    • 전체:
    • 오늘:
    • 어제:
  • 최근 댓글
      등록된 댓글이 없습니다.
    • 최근 공지
        등록된 공지가 없습니다.
      # Home
      # 공지사항
      #
      # 태그
      # 검색결과
      # 방명록
      • TanstackQuery - (1)
        2025년 02월 20일
        • redpome
        • 작성자
        • 2025.02.20.:34

        React Query라 불리던 TanstackQuery는 비동기 처리의 불편함을 해소하기위해 만들어졌다.

        리액트 기준에서 useEffect와 useState를 통한 상태관리는 규모가 커질수록 관리가 어려워진다.

        그리고 클라이언트-서버 모델의 관점에서 클라이언트와 서버 입장에서 상태를 관리해야하므로 이제는 이 두 영역으로 나누어 요소를 다뤄야한다.

         

        TanstackQuery 개념 및 주요 기능

         

        • 서버 상태 관리를 위한 라이브러리로서 데이터 페칭, 캐싱, 동기화, 무효화의 기능을 가진다.
        • 코드의 유지 보수가 쉬워진다. => 새로운 기술의 등장은 항상 이전의 기술보다 효율적이어야한다.
        • 동일한 데이터를 여러 번 요청하지 않도록 캐싱하여 성능을 향상시킨다.

        useQuery

        import ReactDOM from "react-dom/client";
        import App from "./App.jsx";
        import "./index.css";
        import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
        
        const queryClient = new QueryClient();
        
        ReactDOM.createRoot(document.getElementById("root")).render(
          <QueryClientProvider client={queryClient}>
            <App />
          </QueryClientProvider>
        );

         

        Provider를 통해 client에 queryClient를 주입하는 형태로 사용한다. 데이터를 가져오기 위한 훅으로서 쿼리, 비동기 함수(Patching 함수)를 인자로 받아 데이터를 받아오고 로딩,오류 상태의 반환과 데이터를 반환한다. 

         

        import { useQuery } from "@tanstack/react-query";
        import axios from "axios";
        
        const App = () => {
          const fetchTodos = async () => {
            const response = await axios.get("http://localhost:4000/todos");
            return response.data;
          };
        
          const {
            data: todos,
            isPending,
            isError,
          } = useQuery({
            queryKey: ["todos"],
            queryFn: fetchTodos,
          });
        
          if (isPending) {
            return <div>로딩중입니다...</div>;
          }
        
          if (isError) {
            return <div>데이터 조회 중 오류가 발생했습니다.</div>;
          }
        
        ...
              <ul>
                {todos.map((todo) => {
                  return (
                    <li
                      key={todo.id}
                      }}
                    >
                      <h4>{todo.title}</h4>
                      <p>{todo.isDone ? "Done" : "Not Done"}</p>
        ...

         

        먼저 axios.get을 이용하여 URL로부터 요청을 보내고 data를 반환한다.  useQuery의 핵심이 되는 부분만 보자면 다음과 같다.

         

        const {
          data: todos,
          isPending,
          isError,
        } = useQuery({
          queryKey: ["todos"],
          queryFn: fetchTodos,
        });

         

         

        먼저 키워드를 정리해보았다.

         

        • queryKey - ["todos"] 로 쿼리를 식별했다, 서버의 상태를 구분하는 이름으로 쓰인다
        • queryFn - 실제 데이터를 가져오는 함수로서 fetchTodos가 가져오고있다.

        3가지의 상태를 가져서 각 케이스에 맞는 로직을 작성할 수 있다, 데이터를 가져왔으면 구조분해 할당을 한 data,isPending,isError를 통해 로딩 화면이나 에러 표시 등을 할 수 있다. 서버에서 데이터를 조회하고 로딩/에러/성공 상태를 자동으로 관리한다.

         

         

         

         

        useMutation

        데이터를 생성, 수정, 삭제하는 작업에 사용되는 훅이고 비동기 작업을 수행하고 추가적인 작업을 수행할 수 있다.

        비동기 작업을 쉽게 처리한다는 것은 작업 완료 후 관련된 쿼리를 무효화한다.

        무효화한다는 의미는 기존에 캐싱된 데이터는 최신 상태가 아니니 서버에서 가져오도록 지시한다는 것이다.

         

        서버에 데이터를 변경할 때 사용하므로 이하의 코드에서는 addTodo 함수를 전달하는 것을 볼 수 있다. 원하는 시점에 해당 함수를 
        호출하는 것으로 서버에 데이터를 보낸다.

         

        const { mutate } = useMutation({
          mutationFn: addTodo,
          onSuccess: () => {
            // 뮤테이션 성공 후 todos 쿼리를 무효화 -> 자동으로 재요청
            queryClient.invalidateQueries(["todos"]);
          },
        });

         앞서 useQuery에서 사용한 코드에 이어서 ["todos"]라는 queryKey를 이용하여 todos 데이터를 캐싱하였다.

        그런데 todos에 새로운 코드가 추가되면 이미 캐싱된 데이터는 최신 상태가 아니므로 invalidate(무효화)하면 재요청(refetch)
        하게된다.

        위의 코드에서는 addTodo라는 mutation 함수는 성공 시 todos 쿼리를 무효화하게된다.

         

        invalidateQueries

        특정 쿼리를 무효화하고 다시 fetching을 시키는 함수이다. useMutation과 함께 사용하면 데이터가 변경된 후 관련 쿼리를 다시 가져온다.

        이어지는 코드들에서 queryKey의 ["todos"]와 관련된 캐싱 데이터를 '유효하지 않음' 상태로 표시하고, 자동으로 재요청을 하여
        최신 데이터를 가져온다.

        무엇보다 수동으로 refetch 로직 없이도 데이터 변경 시의 UI를 렌더링할 수 있는 장점이 있다.

         

         

        '내일배움캠프' 카테고리의 다른 글

        아웃소싱 프로젝트 - (1)  (0) 2025.02.27
        MBTI 프로젝트 -(1):json-server와의 통신  (0) 2025.02.24
        뉴스피드 프로젝트 - (2)  (0) 2025.02.19
        뉴스피드 프로젝트 - (1)  (0) 2025.02.12
        포켓몬 도감 트러블 슈팅 - 카드 중복 에러  (0) 2025.02.11
        다음글
        다음 글이 없습니다.
        이전글
        이전 글이 없습니다.
        댓글
      조회된 결과가 없습니다.
      스킨 업데이트 안내
      현재 이용하고 계신 스킨의 버전보다 더 높은 최신 버전이 감지 되었습니다. 최신버전 스킨 파일을 다운로드 받을 수 있는 페이지로 이동하시겠습니까?
      ("아니오" 를 선택할 시 30일 동안 최신 버전이 감지되어도 모달 창이 표시되지 않습니다.)
      목차
      표시할 목차가 없습니다.
        • 안녕하세요
        • 감사해요
        • 잘있어요

        티스토리툴바