2023-12-15 본캠프 52일차 / 71일차 TIL

2023-12-15 본캠프 52일차 / 71일차 TIL

 

주요 진행사항

- 개인과제 진행 

 

개인과제 진행 -  level 5

 

개인과제의 마지막 단계인 level5를 진행하였다.

level5는 typescript와 react-query를 사용한다.

 

react-query의 사용 (v5 기준)

1. useMutation

  const addMutation = useMutation({
    mutationFn: addTodoHandle,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['toDoData'] });
    }
  });

 

useMutation은 CRUD에서 CUD에 해당하는 기능으로 기존에 가져온 데이터를 수정하는데 사용된다.

react-query의 장점이 여기서 나온다.

queryClient.invalidateQueries를 사용하여 기존에 있던 옛날 데이터를 버리고 새로운 데이터로 갱신한다.

 

이때 갱신은 queryKey를 트리거하여 갱신한다.

 

2. useQuery

  const { isLoading: toDoDataLoading, data: toDoData } = useQuery({
    queryKey: ['toDoData'],
    queryFn: getTodoHandle
  });

 

useQuery를 사용할 때 queryKey를 지정하여 useMutation을 통해 발생하는 수정을 바로바로 갱신할 수 있도록 해준다.

또한 isLoading, isError 등 다양한 부가 기능을 제공한다.