목록prefetching (1)

sohyeon kim

[React] TanStack Query : Prefetching 프리패칭

💡 UX 를 개선하기 위해 데이터를 미리 가져오는 기능 페이지 이동 전, 이동할 페이지의 쿼리를 미리 호출(prefetching)!캐시 데이터가 있는 상태로 다음 페이지로 이동 시 로딩 없이 바로 UI 가 나타난다. Header.jsxconst onMouseOver = () => { // 메뉴에 마우스가 올라오면 호출 if (pathname !== "/") return; queryClient.prefetchQuery({ queryKey: ["movies", 1], // 1 페이지 데이터 요청 queryFn: fetchMovieData, }); }; 메뉴에 마우스가 올라오면 데이터를 미리 불러놓는다. MoviePagination.jsxconst { data: movie..
React 2024. 8. 7. 01:15
이전 Prev 1 Next 다음