clyde-yoon 님의 블로그

전제axios 사용react-query 사용서버컴포넌트 사용 "dependencies": { "@tanstack/react-query": "^5.64.1", "@tanstack/react-query-devtools": "^5.64.1", "next": "15.1.0", "react": "^19.0.0", "react-dom": "^19.0.0", },app├── products │ └── [id] -- 아이템 상세보기 페이지│ ├── sections -- UI 하위 컴포넌트 │ │ ├── MainContent.tsx│ │ ├── Profile.tsx│ │ └── Reviews.tsx│ ├── ui│..

리엑트쿼리를 사용할 수 있는 범주들은 정말 다양하게 존재한다.페이지네이션, 무한스크롤, 유저정보관리, 장바구니, 게시판, 좋아요/싫어요버튼 , 주문 시스템, 댓글 시스템 등 무궁무진해서, 어느상황에서도 접목이 가능하다. 기존 프로젝트에선 유저의 정보를 zustand 라이브러리를 사용하여, 상태를 관리했지만, 리엑트쿼리를 통해 구현한다면, 모든 상태를 하나의 라이브러리로 관리할 수 있지 않을까? 란 생각에서 출발한 로그인 기능을 구현해 보았다.  전체 코드import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';import { UserInfo, UserUpdateData } from '@/types/user/userInfo'..

프론트를 공부하면서 자주 듣는 단어였던 '상태관리' 에 관하여 와닿지 않을시점, 프로젝트를하며 너무나도 많은 useState와 서버상태까지 관리하며, 동시에 화면에 렌더링하기위한 수많은 useEffect에 지칠 시점, 리엑트쿼리에 대하여 알게되었다. 그때의 내가 봤으면 좋았을 만한 것들을 작성해 보고 싶었다. 서론 1. 보일러 플레이트서버에서 하나의 data를 가지고온다고 가정해보자.const [data. setData] = useState(null)const fetchData = async () => { const res = await axios.get('/api/data'); setData(res.data); }res에는 호출한 데이터가 담겨있을 것이다. 그러나 이 데이터가 완벽하게 도착할 순..