TanStack Query

TanStack Query: 데이터 페칭과 상태 관리, 사용자 인터랙션 처리 등을 효율적으로 수행할 수 있게 함

TanStack Query의 useQuery 훅을 사용하여 서버에서 데이터를 가져오고 이를 컴포넌트에 제공

useQuery훅은 queryKey와 queryFn 두 개의 주요 속성이 팔요

• queryKey: 쿼리를 식별하는 데 사용
  여기서는 ['Users']를 사용하여 사용자 데이터를 식별
• queryFn: 실제로 데이터를 페칭하는 비동기 함수
  여기서는 getUserData 함수를 사용
• enabled: !!id는 id가 유효할 때만 쿼리를 실행하도록 설정

if (isLoading) return

Loading...

;
if (error) {
return

Error: {error.message}

;
}

isLoading과 error를 사용하여 데이터를 로딩 중이거나 에러가 발생했을 때 사용자에게 적절한 피드백을 제공

TanStack Query의 useMutation 훅을 사용하여 데이터를 변경

• mutationFn: 데이터를 업데이트하는 비동기 함수
  여기서는 changeUserType 함수를 사용하여 사용자 유형을 변경
• onMutate: 뮤테이션이 실행되기 전에 실행되는 함수
  쿼리를 취소하고 이전 데이터를 저장하며, 낙관적 업데이트를 수행
• onError: 뮤테이션이 실패했을 때 실행되며, 이전 데이터를 복원
• onSettled: 뮤테이션이 성공하거나 실패한 후 실행되며, 관련 쿼리를 무효화하여 데이터를 다시 가져옴

사용자 유형변경

버튼을 클릭하면 mutation.mutate가 호출되어 changeUserType 함수가 실행
이 과정에서 사용자 유형이 변경되고, 관련된 쿼리가 무효화되어 업데이트된 데이터를 다시 가져오게 됨

useQuery: 데이터를 가져오고, 로딩 및 에러 상태를 관리하며, 데이터의 최신 상태를 유지

useMutation: 데이터를 변경하고, 낙관적 업데이트 및 에러 처리를 통해 사용자 경험을 향상