본문 바로가기

react-query2

React Query - Placeholder, Initial Data React Query initial data 더 나은 사용자 경험 추구는 프론트엔드 개발자의 숙명과도 같다. 이를 위해 수많은 노력을 하게 되는데... 대표적인 사례가 → 서버에서 데이터를 받기 전 화면을 어떻게 그릴 것인가! 일반적으로는 로딩 화면을 보여주면 되지만... 이 역시 '최선의' 방안이라고 보기는 어려울 테다(기다리는 걸 좋아하는 사람은 없으니!) 그렇다면 '최선의' 방안이란 뭘까? → 서버 데이터를 받아오기 전에, 화면을 그려주는 건 어떨까? React Query는 이를 위해 여러 유용한 도구들을 제공한다. prefetchQuery : 추후 필요한 데이터 미리 가져오기 keepPreviousData : 쿼리 키가 변경되더라도 마지막으로 success된 data 유지 Placeholder, .. 2023. 8. 16.
React Query - keepPreviousData 다음과 같은 상황을 겪었다. 필요한 요구 사항은 반려동물 상세 페이지에서, 상단 카드 버튼을 눌러(나, 음, 뭉치), 해당 반려동물의 상세 데이터를 불러오는 것! 이 때 불러올 반려동물의 id를 state로 관리하고, 해당 state를 useQuery의 key값으로 전달해, 상단 카드 버튼을 눌러, id가 변경될 때마다, 해당 useQuery가 fetch 되도록 하였다. 여기서 문제점은... 맨 처음 해당 페이지에 들어왔을 때 (해당 반려동물 상세 데이터 요청이 success되기 전에) 발생하는 깜빡임을 해결하기 위해 placeholderData를 넣어줬는데, 상단 카드 버튼을 눌러 해당 query가 fetching 됨에 따라, 해당 query의 data가 최초에 넣어준 placeholderData가 되.. 2023. 8. 15.

티스토리툴바