sohyeon kim

💡 데이터 패칭이 일어나 기존 데이터에 fetched data 를 추가하고자 할 때 유용하게 사용할 수 있는 hook 더보기 UI 또는 무한스크롤 UI 에 사용하기에 적합!const { data: movies, hasNextPage, fetchNextPage, isFetchingNextPage, } = useInfiniteQuery({ queryKey: ["movies"], // 페이지 없이 키만 전달 queryFn: fetchMovieData, getNextPageParam: (lastPage) => { console.log("getNextPageParam 호출"); console.log("lastPage: ", lastPage); ..

💡 이전 캐시데이터가 있다면, Loading UI 가 아닌  기존 UI 표시 페이지 이동 시 우선 캐시데이터가 나타나고, 서버로부터 새 데이터를 받아오면 그때 UI 를 변경한다.useQuery 의 옵션 중 keepPreviousData 를 true 로 바꾸면 이전 캐시데이터를 기반으로 isLoading 여부를 판단한다. const { data: movies, isLoading } = useQuery({ queryKey: ["movies", page], // initial queryKey:["movie", 1] queryFn: fetchMovieData, select: ({ total_pages, results }) => ({ total_pages, results, ..

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

💡 사용자에게 빠른 피드백을 제공하도록 하는 옵티미스틱(낙관적) 업데이트 어떤 요청이 있었을 때 서버 요청이 정상적으로 잘 될거란 가정 하에 UI 를 먼저 변경하고, 그 후 요청을 보내는 방식!서버 요청이 실패한다면 UI 는 다시 원상복구(revert / roll back) 된다.  const addMutation = useMutation({ mutationFn: addTodo, // 실행 순서 (2) // onSuccess: () => { ** 기존 방식 성공하면 무효화 // queryClient.invalidateQueries(["todos"]); // }, onMutate: async (newTodo) => { // 실행 순서 (1) console.log(..