react-query 썸네일형 리스트형 React Query와 Next.js에서 헤더 데이터 캐싱 문제 트러블슈팅 이번 글에서는 실제 프로젝트에서 겪었던 헤더 데이터 로딩 이슈와 이를 React Query의 다양한 옵션을 활용해 해결한 경험을 공유합니다.문제 상황저희 웹사이트에서는 헤더가 공통 컴포넌트로 모든 페이지에 표시되고 있는 구조였습니다. 헤더에 표시될 배너 데이터를 효율적으로 관리하기 위해 처음에는 다음과 같은 접근 방식을 시도했습니다.Zustand를 사용하여 배너 데이터를 전역 상태로 관리React Query로 API 데이터를 가져와 Zustand 스토어에 저장컴포넌트에서는 Zustand 스토어의 데이터를 사용하여 렌더링그러나 이 방식에는 문제가 있었습니다. 콘솔에는 데이터가 정상적으로 로그되었지만, 이미지가 로드되지 않았고 페이지 이동 시 데이터가 유지되지 않았습니다.원인 분석불안정한 쿼리 키 구조: 함.. 더보기 레거시 코드를 React Query로 개선한 리팩토링 이야기 이커머스 플랫폼의 결제 시스템을 유지보수하면서 React Query를 도입하여 코드 품질과 성능을 개선한 경험을 공유하려고 합니다. 기존 코드의 문제점 발견프로젝트에 투입되어 코드를 분석하던 중, 데이터 패칭 로직이 대부분 useEffect로 구현되어 있는 것을 발견했습니다.// 기존 코드const [memberAddress, setMemberAddress] = useState(null);const [isLoading, setIsLoading] = useState(true);useEffect(() => { if (!router.isReady) return; fetchMemberAddress(); createOrderProducts();}, [router, router.isReady]);const f.. 더보기 이전 1 다음