React Query 2

React Query의 useMutation 구현 예시와 콜백 활용법

React Query는 서버 상태 관리를 간편하고 효율적으로 처리할 수 있는 훌륭한 도구입니다. 그 중에서도 useMutation 훅은 데이터를 업데이트, 삭제 또는 생성하는 비동기 작업을 처리하는 데 주로 사용됩니다. 이번 글에서는 useMutation을 사용하여 파일 업로드 기능을 구현하고 그 개념과 활용 방법을 살펴보겠습니다.   useMutation의 기본 개념useMutation은 서버에 데이터를 전송하거나, 삭제, 업데이트하는 작업을 수행하며 작업의 성공, 실패, 진행 중 상태를 쉽게 관리할 수 있도록 도와줍니다.const mutation = useMutation(mutationFn, { onSuccess: (data, variables, context) => { // 작업이 성공적으로..

React Query의 useQuery를 활용한 데이터 조회 및 상태 관리

React Query는 서버 상태 관리를 위한 도구로, 그 중 useQuery 훅은 서버에서 데이터를 가져오고, 그 데이터를 상태로 관리하며, 데이터를 가져오는 동안 로딩, 에러 처리 등을 쉽게 할 수 있도록 도와줍니다. 이번 글에서는 useQuery 훅을 사용하여 데이터를 조회하고, 상태를 관리하는 방법에 대해서 알아보겠습니다.   useQuery의 기본 사용법const { data, error, ... } = useQuery(queryKey, queryFn);queryKey:이 키는 React Query가 캐시를 식별하고 관리하는 데 사용됩니다. 동일한 키를 가진 쿼리는 캐시된 데이터를 공유하게되죠.queryFn:데이터를 조회하는 함수입니다. 이 함수는 서버에서 데이터를 가져오고, 그 결과를 반환합니..