React Query v5(TanStack Query)의 내부 구조와 동작 원리를 심층 분석하여, 더 효율적인 서버 상태 관리를 위한 인사이트를 제공합니다. 들어가며 React Query는 비동기 상태 관리 라이브러리로서 리액트 개발에서 서버 상태 관리의 사실상 표준처럼 사용되고 있습니다. 하지만 useQuery()를 사용하다 보면 내부에서 어떤 마법이 일어나는지 궁금해집니다. 김정환님의 블로그를 참고하여 React Query의 내부 동작을 ...
1. Introduction The brief disappearance and reappearance of data on the screen—commonly referred to as “flickering”—is a problem nearly every frontend developer has encountered at least once. This flicker typically occurs when existing values momenta...
1. 서론 화면에서 데이터가 잠깐 사라졌다가 다시 나타나는 ‘깜빡임’은 프론트엔드 개발자라면 누구나 한 번쯤 마주했을 문제이다. 서버 데이터를 다시 패칭할 때 기존 값이 잠시 사라지며 발생하는 이 '깜빡임' 현상은 사용자 경험에 큰 영향을 준다. 이번 글에서는 내가 실제 프로젝트에서 마주한 이 문제 상황을 중심으로, 원인을 분석하고 다양한 해결 방안을 비교하며 어떤 선택을 내렸는지를 기록하고자 한다. 2. 문제 상황 인지 및 맥락 설명 이번 프...
Why TanStack Query? Without it, you’d manually: Fetch data inside useEffect Use useState to manage data, loading, and error Handle refetching, caching, and side-effects on your own With TanStack Query, it's all streamlined with a single hook – u...
If you've ever struggled with managing server state in React applications, the TanStack Query library (formerly known as React Query) is here to save the day. It revolutionizes data fetching, caching, query invalidation, and so much more. And to make...
최근에 인프런 멘토링을 받았는데 tanstack-query는 프론트엔드 개발자에게 선택이 아닌 필수다! 라는 이야기를 듣고 이번 프로젝트에 직접 사용해보려고 한다. 일단 사용하기에 앞서 공부한 내용을 정리하려고 한다 ! 🌱 (평소에는 공부한 내용들을 깃허브에 기록하지만 내가 작성한 내용이 누군가에게 도움이 되면 좋겠는 마음에 …. ✨) 굉장히 많은 도움을 받은 블로그입니다,,👍🏻 ✨ Tanstack-Query(react-query)가 뭔가...
As a developer who loves the balance between performance and developer experience, I often choose Next.js for building client-side web applications. While Next.js is known for its SSR (Server-Side Rendering) capabilities, I use it in a slightly diffe...
What is TanStack Query? TanStack Query is a tool that helps our React app talk to APIs (servers) easily and smartly. Normally, we’d write a bunch of code to: Ask the server for data Show a loading spinner Handle errors Save the result so it doesn...
Hey devs! Today we're diving into how to set up a read operation in a React app using TanStack Query with an Express backend and Prisma ORM. I know a ton of you are jumping on the Next.js bandwagon (for good reason!), but there's still plenty of grea...
💥 문제 정의 초기 렌더링 시 깜박거림으로 인해 UI 요소들이 이동되어 UX가 저하되는 문제가 발생했습니다. 🔍 원인 분석 상세 페이지에서 참여자 목록 데이터를 클라이언트에서 API 요청으로 가져오도록 구현되어 있었습니다. 데이터가 도착하기 전에 해당 영역은 비어있는 상태로 렌더링되었고, 데이터가 도착한 후에야 채워지면서 화면이 잠깐 깜빡이는 현상이 발생했습니다. 🔧 해결방법 서버 컴포넌트를 활용하여 데이터를 미리 가져와서 캐싱한 뒤, 클...
![[React] Tanstack-Query에 대해서 알아보자 & 무한스크롤 구현](https://cdn.hashnode.com/res/hashnode/image/upload/v1748867151081/a63597a1-ce6f-4fe3-a917-a06a8333de36.png)
