[React-Query] useMutation 으로 CRUD 적용하기 (feat. 무한 스크롤)

[ 게시판 프로젝트 ]
Stack : Next.js (14 App Router - Client / Serverless API 직접 구현), MongoDB
Info : 기록하고 싶은 글을 자유롭게 남길 수 있는 게시판 서비스

 

목차

• useMutation 적용 이유
• useMutation 적용 예시 (feat. 북마크 기능)
• 최종 구현 화면

 

📌 useMutation 적용 이유

현재 게시판 프로젝트는 무한 스크롤 기능(React-Query 의 useInfiniteQuery)이 적용된 상태이다.

사용자가 page=2, page=3.. 으로 게시글을 보고 있다가, 특정 동작(ex. 수정, 삭제)을 하면 데이터가 page=1 로 초기화 된다.

이렇게 되면 이전에 보고 있던 데이터를 보고 싶으면 다시 불러와야 한다.

이를 React-Query 의 useMutation 을 사용해 페이징했던 데이터를 캐싱해서 가지고 있다가, 특정 동작이 있어도 이전 데이터를 유지하는 식으로 바꾸면 좀 더 성능상 좋을 것 같았다.

 

📌 useMutation 적용 예시 (feat. 북마크 기능)

북마크 아이콘 onClick 시 동작하는 함수

const queryClient = useQueryClient()

const { mutate: handleBookmarkArticle } = useMutation({
    mutationFn: () =>
        fetch('/api/board/bookmark-article', {
            method: 'POST',
            body: JSON.stringify({
                id: selected,
                isBookmarked: !bookmarked,
            }),
        }),
    onSuccess: async (res) => {
        const data = await res.json()
        if (res.status === 200) {
            await queryClient.invalidateQueries({ queryKey: ['articles'] })
        } else if (res.status === 500) {
            alert(data.message || '알 수 없는 오류가 발생했습니다.')
        }
    },
    onError: (error) => {
        alert(error.message)
    },
})

• mutationFn: 비동기 작업을 수행하고 프로미스를 반환하는 함수
• invalidateQueries : queryKey 에 해당하는 데이터를 무효화 시킨다.
  이는 무효화된 쿼리가 다시 페칭되면서 필요한 데이터만 업데이트하고, 나머지는 캐시된 데이터를 그대로 유지한다. 
  예를 들어, 페이지 3의 데이터 중 하나의 북마크를 true 로 변경했다면, 해당 데이터만 수정된 값이 반영되고 나머지는 캐시된 데이터를 보여준다.

 

📌 최종 구현 화면

데이터를 가공했을 때 화면이 새로고침 되거나 데이터가 초기화되는 등의 동작이 없어서 자연스러운 사용 경험을 제공할 수 있게 된다.