[React] React Query - 무효화

조수현·2025년 11월 30일

서론

이전에 리액트 쿼리에 대해 쓴 적이 있는데 그냥 리액트 쿼리 써봤으니까 개념 쓰고 다시 환기해야지 하고 썼는데
최근에 다시 쓰게 되니 내가 몰랐던 개념이 있었다;

참고

TanStack Query

React Query 기본

서버에서 넘어오는 데이터 관리를 돕는 라이브러리

기본 구조

쿼리를 사용하려는 컴포넌트를 감싸는 provider

const queryClient = new QueryClient()

function App() {
  return (
    // Provide the client to your App
    <QueryClientProvider client={queryClient}>
      <Component />
    </QueryClientProvider>
  )
}

쿼리를 사용하는 컴포넌트

const query = useQuery({ queryKey: ['data-query-key'], queryFn })
// { data, isLoading, isFetching ,,,}

const mutation = useMutation({ // {mutate, mutateAsync, isError, isSuccess ,,, }
	mutationFn,
    onSuccess,
  	onError,
})

useQuery와 useMutation

useQuery는 데이터 불러오기
useMutation은 데이터 생성/수정/삭제 시 사용

용도

데이터 캐싱을 쉽게 관리
데이터 로딩 시 화면 로딩 처리가 쉬움

📎 더 자세한 내용은 이전 리액트 쿼리 글

무효화

서버에서 넘어오는 데이터를 받아서 업데이트 하는 경우가 많다
그러면 로컬 데이터도 수정하고 수정된 내용을 서버에도 업데이트를 해야한다
로컬 데이터를 직접 업데이트해도 되지만 서버에서 바로 수정된 데이터를 받을 때도 있다
이 때 리액트쿼리의 무효화 로직을 사용하면 간편하게 불러올 수 있다

무효화란

현재 불러와져 있는 데이터를 최신이 아니라고 처리해 다시 최신 데이터를 불러오도록 함

데이터 페칭 시 useQuery에서 사용했던 쿼리키를 invalidateQueries의 queryKey로 넣는다
이 데이터는 무효한 데이터니까 새로 불러와~ 라는 의미


function getData = async ()=>{
	// 서버 데이터 불러오는 로직
}

function updateData = async () => {
	// 서버 데이터 업데이트 하는 로직
}

const query = useQuery({ queryKey: ['data-query-key'], queryFn: getData })

const mutation = useMutation({
	 mutationFn: updateData,
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ['data-query-key'] }) // 무효화 코드
    },
})


const handlerButtonClick = ()=>{ 
// 이 로직이 실행된 후 무효화 처리되어
// 컴포넌트가 업데이트 되거나, 데이터를 참조할 때 데이터 새로 불러오기
  mutation.mutate({
    id: 5,
    name: 'soohyun',
  })
}