React Query initial data 더 나은 사용자 경험 추구는 프론트엔드 개발자의 숙명과도 같다. 이를 위해 수많은 노력을 하게 되는데... 대표적인 사례가 → 서버에서 데이터를 받기 전 화면을 어떻게 그릴 것인가! 일반적으로는 로딩 화면을 보여주면 되지만... 이 역시 '최선의' 방안이라고 보기는 어려울 테다(기다리는 걸 좋아하는 사람은 없으니!) 그렇다면 '최선의' 방안이란 뭘까? → 서버 데이터를 받아오기 전에, 화면을 그려주는 건 어떨까? React Query는 이를 위해 여러 유용한 도구들을 제공한다. prefetchQuery : 추후 필요한 데이터 미리 가져오기 keepPreviousData : 쿼리 키가 변경되더라도 마지막으로 success된 data 유지 Placeholder, ..

다음과 같은 상황을 겪었다. 필요한 요구 사항은 반려동물 상세 페이지에서, 상단 카드 버튼을 눌러(나, 음, 뭉치), 해당 반려동물의 상세 데이터를 불러오는 것! 이 때 불러올 반려동물의 id를 state로 관리하고, 해당 state를 useQuery의 key값으로 전달해, 상단 카드 버튼을 눌러, id가 변경될 때마다, 해당 useQuery가 fetch 되도록 하였다. 여기서 문제점은... 맨 처음 해당 페이지에 들어왔을 때 (해당 반려동물 상세 데이터 요청이 success되기 전에) 발생하는 깜빡임을 해결하기 위해 placeholderData를 넣어줬는데, 상단 카드 버튼을 눌러 해당 query가 fetching 됨에 따라, 해당 query의 data가 최초에 넣어준 placeholderData가 되..