![]()
지난 포스트에서는 리액트 쿼리에 대해 작성해보았고 오늘은 실제로 진행중인 프로젝트에 적용한 내용에 대해 작성할 것이다 ! 왜 리액트 쿼리를 사용했는가 ? 현재 메인 화면에 진입했을 때 MainLayout.tsx 에 존재하는 네비게이션 바에서 회원 정보를 넘겨주어 네비게이션 바에서 회원 정보를 렌더링 하는 형식으로 코드를 작성했었다. 리액트 쿼리 적용 전 회원 조회 코드 MainLayout.tsxconst { data, callApi, statusCode } = useApi(); useEffect(() => { const fetchData = async () => { const token = localStorage.getItem("accessToken"); const hea..
오늘은 지난 포스트에서 설명했듯 useQuery와 useMutation에 대해 작성해 볼 것이다. Queries쿼리는 고유 키와 연결된 비동기 데이터 소스에 대한 선언적 의존이다. 쿼리는 서버에서 데이터를 가져오기 위해 Promise 기반 메서드(예: GET 및 POST)를 사용한다. 데이터를 수정하는 메서드에는 Mutations를 사용하는 것이 좋다. 서버에서 데이터를 가져올 때 -> useQuery 데이터를 수정할 때 -> useMutaion useQuery 사용법 queryKey : 쿼리의 고유 키 , 캐시를 관리하기 위한 키 값으로 배열 형태로 사용 queryFn : promise 를 반환하는 함수 import { useQuery } from '@tanstack/react-query'funct..
오늘 포스트는 Tanstack Query 공식문서를 읽고 Tanstack Query에 대한 개념과 사용방법에 대해 작성해 볼 것이다. 공식문서에 대한 포스트는 양이 많아질 것으로 예상되어 여러 포스트로 작성될 예정이다 ! TanStack Query란?(React Query)TanStack Query( 이전에는 React Query)는 웹 애플리케이션의 데이터 패칭 라이브러리로, 서버 상태를 쉽게 패칭, 캐싱, 동기화 및 업데이트할 수 있도록 해준다. 한마디로 강력한 비동기 상태관리 툴. 공식문서에서는 기존에 존재하는 다른 상태 관리 라이브러리(redux, zustand, recoil..)는 클라이언트 상태를 다루기에는 좋지만, 비동기나 서버 상태를 다루기에는 적합하지 않다고 설명되어 있다. ..
