본문 바로가기

React Query2

Next.js App Router에서 React Query 쓰면서 metadata 쓰기 Next.js App Router에서 React Query 쓰면서 metadata 쓰기🚨 문제 상황QueryClientProvider는 클라이언트 컴포넌트에서만 사용할 수 있다. 그런데 layout.tsx는 기본적으로 서버 컴포넌트임! 그래서 layout 최상단에 use client를 붙이면… 서버 전용 기능인 metadata가 에러 나면서 작동 안 함 😅🧐 왜 metadata는 서버에서만 되냐?Next.js에서 metadata는 서버 컴포넌트에서만 평가되는 정적 정보다.HTML 에 들어가는 title, description, og:image 같은 정보!! 서버에서 미리 렌더링되어 SEO, SSR, SSG 등에 활용된다. 즉, 클라이언트에서 평가하면 안 되는 값이기 때문에use client를 붙이면.. 2025. 9. 6.
React Native에 React Query 적용하기 React Native에 React Query 적용하기React Query란?React Query는 서버 상태 관리 라이브러리로 아래와 같은 기능을 제공한다!데이터 페칭, 캐싱, 동기화, 업데이트 관리네트워크 요청 상태(로딩, 에러, 성공) 추적서버 데이터 캐싱 및 리패칭 최적화이번 프로젝트에서 회원가입 기능을 구현하면서, React Query를 도입했는데 연습용으로 사용해봤다. React Query는 서버와의 비동기 통신을 효율적으로 관리하고, 상태 관리가 복잡하지 않게 해주는 도구로 잘 알려져 있다. 기존에는 서버와의 비동기 통신을 처리하기 위해 fetch나 axios를 사용했었지만, React Query는 비동기 상태를 자동으로 관리해줘서 상태 변화에 따른 처리 로직을 더욱 깔끔하게 작성할 수 있었.. 2025. 2. 8.