deletePost 함수를 posts.jsx 컴포넌트에 가져왔지만,
deletePost 함수를 postDetail 컴포넌트(실제로 변이가 실행될 컴포넌트임)에는 안가져옴
이 변이 함수를 posts에서 useMutataion과 함께 실행하고 싶은 이유를 이따가 살펴보자.
코드
시작해보자.
그런데 실제로 반환 객체를 구조 분해하지 않을 것이다.
왜냐하면, 이미 useQuery로 구조 분해했기 때문 !
더군다나 변이 작업을 해야하기 때문에, 여러 변이를 처리하며 발생할 수 있는 네임스페이스 혼란을 피해보자.
useQuery에 인수로 전달하는 쿼리 함수와는 달리,
우리가 인수로 전달하는 mutation 함수는 실제로 인수를 가질 수 있다.
그래서 postId를 사용할 수 있다.
왜냐?
useMutation을 기억해라.
mutate 함수를 반환하는 객체임.
그래서, 누군가 삭제 버튼을 클릭할 때 우리가 실행하고 싶은건 그 mutate 함수임/
그리고, 이 변이 함수 즉, deleteMutation 함수를 postDetail 컴포넌트에 넘긴다.
인수를 받을 수 있으니까 , 이 함수에 우리가 표시하고 있는 post.id를 인수로 주자.
이 인수는 mutate 함수에 의해 받아지고,
결국 이 인수는 상위 컴포넌트의 deletePost로 전달된다.
deleteMutation 옵션에 대해선 이게 다다.
하지만 우리가 옵션들을 더 추가할 수 있다.
- 필요한 것은 변이 함수 뿐.
- 변이 키는 추가하지 않아도 됨.
- 변이와 연관된 캐시의 데이터가 없음.
다음시간에,
useMutation 함수로부터 반환된
deleteMutation의 다른 속성들을 자세히 살펴보자.
