문제점 가게 상세 페이지에서 해당 가게에 대한 댓글을 렌더링할 때 페이지네이션을 통해 5개씩 가져오도록 구현해야 했다. 댓글 페이지네이션은 queryKey에 현재 페이지를 넣어 새로운 페이지 버튼을 클릭할 때마다 데이터를 fetching하는 방법으로 진행했다. 이 과정에서 페이지 버튼 클릭 시, 새로운 데이터를 가져올 때마다 화면이 깜빡거리는 문제가 발생하였다. 처음에는 전체 댓글 영역이 고정되어 있지 않아 댓글 데이터를 로드하는 중에 화면에 영역이 표시되지 않아서 발생하는 문제라고 생각했다. 따라서 스켈레톤 UI를 먼저 표시하고, 데이터 로드가 완료되면 댓글이 렌더링되도록 했지만 해결되지 않았다. 이후 react query 공식 문서의 Paginated Queries 관련 내용을 읽고, 다음과 같은 원..
쿼리 키는 리액트 쿼리를 사용하는 데 핵심적 역할을 한다. 이 쿼리 키를 잘 이해하지 못하고 사용하면, 캐시를 업데이트하거나, 필요한 캐시를 가져오는 게 내 마음 같지 않다.. 분명히 getQueryData를 하는데 계속 undefined가 출력된다거나 invalidateQueries를 했는데 화면이 원하는대로 업데이트되지 않는다면 쿼리 키를 잘못 사용하고 있을 가능성이 크다. 좌절하지 말고 하나씩 확인해보고 이해가 안 되면 아래를 읽어보자 ! 확인할 사항 쿼리 키를 사용하여 직접적으로 쿼리 캐시에 접근하는 메서드(invalidateQueries, setQueryData, getQueryData 등) 사용 시, useQuery로 받아온 데이터를 캐싱하고 있나요? 변하는 값에 따라 refetch해야 하는 ..
MYCHELIN 프로젝트에서 가게 상세 페이지를 맡아 진행하면서 해당 가게에 대한 댓글과 저장 데이터를 서버에서 받아와 렌더링하고, 추가, 삭제 등의 mutation을 해야 했다. 이때 React Query를 이용해 받아온 데이터를 캐싱해 사용했다. 유저가 해당 가게를 저장하거나 저장을 취소하고, 댓글을 남기거나 삭제했을 때 즉각적인 피드백을 하기 위해 useMutation, setQueryData, 그리고 invalidateQueries를 통한 낙관적 업데이트를 했다. TL;DR useQuery로 고유한 쿼리 키를 사용해 데이터를 캐싱한다. useMutation으로 서버 데이터를 업데이트한다. mutation 이후에 화면을 바로 업데이트할 필요가 없다면 useMutation에 mutationFn을 전달..
mutation이란 ? 일반적으로 mutation은 부수 효과(side effect)가 있는 함수를 말한다. 예를 들어, 배열의 push 메서드는 원본 배열을 변경하는 부수효과가 있는 함수이다. 같은 맥락에서 React Query의 useMutation은 서버에 부수 효과(side effect)를 일으킨다. 데이터 추가, 삭제 또는 유저의 로그인 모두 이 경우에 해당한다. useQuery와 useMutation useQuery와 useMutation을 처음 보면 어떤 상황에서 사용해야 하나 헷갈릴 수 있다. useQuery는 GET 요청과, useMutation은 POST, PATCH, DELETE 요청과 유사하다고 생각하면 된다. 언제 사용하면 될까? useQuery는 고유한 쿼리 키를 기반으로 서버에..
