728x90 react-query2 [React-Query] useMutation 으로 CRUD 적용하기 (feat. 무한 스크롤) [ 게시판 프로젝트 ]Stack : Next.js (14 App Router - Client / Serverless API 직접 구현), MongoDBInfo : 기록하고 싶은 글을 자유롭게 남길 수 있는 게시판 서비스 목차useMutation 적용 이유useMutation 적용 예시 (feat. 북마크 기능)최종 구현 화면 📌 useMutation 적용 이유현재 게시판 프로젝트는 무한 스크롤 기능(React-Query 의 useInfiniteQuery)이 적용된 상태이다.사용자가 page=2, page=3.. 으로 게시글을 보고 있다가, 특정 동작(ex. 수정, 삭제)을 하면 데이터가 page=1 로 초기화 된다.이렇게 되면 이전에 보고 있던 데이터를 보고 싶으면 다시 불러와야 한다.이를 React-.. 2024. 9. 30. [Next.js] React-Query로 무한 스와이퍼 구현하기 (ft. useInfiniteQuery, getServerSideProps, react swiper) 📌 기존 코드의 문제점 영화 추천 프로젝트 리팩토링 과정에서 메인 페이지에서 카테고리 별 영화 리스트를 불러올 때 SSR을 적용하였다. (적용한 이유는 위 링크의 게시글에 기록해두었다) 기존 코드 처음 페이지 진입 시, Server-Side에서 불러온 데이터를 뿌려주고 사용자가 swiper를 넘기면 Client-Side에서 page=2, page=3..의 데이터들을 불러오게 된다. 불러온 데이터들은 state에 spread operator(스프레드 연산자)로 추가해주는 방식으로 동작했다. 그러나 이렇게 되면 다른 페이지에 있다가 돌아왔을 때 이전에 불렀던 데이터들이 리셋되어 다시 요청해야 하기 때문에 데이터 사용량이 늘어나게 되는 단점이 존재한다. // 메인 페이지 import type { InferGe.. 2023. 8. 14. 이전 1 다음 728x90
