The Best Data Fetching Pattern in React

React 애플리케이션에서 데이터 가져오기 패턴은 중요하며, 컴포넌트 내에서 직접 데이터를 가져오는 것은 피해야 합니다. ⚛️
컴포넌트 내에서 useQuery를 사용하면 초기 렌더링 시 데이터가 undefined 상태로 시작되어 불필요한 리렌더링을 유발할 수 있습니다. 🔄
여러 쿼리를 컴포넌트 내에서 처리하면 로딩 및 에러 상태 관리가 복잡해지고 컴포넌트 성능이 저하될 수 있습니다. 🐌
데이터 가져오기는 일반적으로 네비게이션 이벤트에 종속되므로, 네비게이션 라이브러리의 로더 기능을 활용하여 컴포넌트 외부에서 데이터를 미리 가져오는 것이 좋습니다. 🧭
Tanstack Router와 같은 라이브러리의 로더를 사용하여 데이터를 미리 가져오면 컴포넌트 로딩 전에 데이터를 준비할 수 있습니다. 🚀
useSuspenseQuery를 사용하면 로딩 및 에러 상태 처리를 Suspense 경계로 위임하여 컴포넌트를 단순화하고 성능을 향상시킬 수 있습니다. 🧘
데이터가 네비게이션에 기반한 경우, React 컴포넌트 외부의 로더에 배치하여 가져오는 것이 좋습니다. 📦

뭘 배워도 이젠 똑같아요