본문 바로가기

전체 글

 (224)
[TanStack Query / React Query] useInfiniteQuery와 무한 스크롤 useInfiniteQuery는 페이지네이션이나 무한 스크롤과 같은 데이터 로딩을 구현할 때 사용됩니다.    1. useQuery 와 useInfiniteQuery의 차이  ● useQuery단일 데이터 객체 반환 한 번의 요청에 대한 응답만 저장 ●  useInfiniteQuerypages 배열: 모든 페이지의 데이터를 순서대로 저장 pageParams 배열: 각 페이지를 가져올 때 사용된 매개변수 저장 여러 페이지의 데이터를 누적하여 저장 좀 더 이해하기 쉽게 data에 로그를 찍어보면 useQuery 와 uesInfiniteQuery 의 반환되는 data 의 구조는 다음과 같은 차이가 있습니다   1-1. useQuery const { data } = useQuery({ queryKey: ['i..
[TanStack Query / React Query] prefetchQuery : 데이터 선제적 로딩 이전 토이 프로젝트에서는 react-router 와 함께 사용하여loader 를 이용하여 페이지가 열리기 전, 사전에 데이터를 가져오는 방법을 사용했었지만순수하게 TanStack Query 를 사용하여 사전에 데이터를 가져오는 방법을 찾아보았습니다.  prefetchQuery & prefetchInfiniteQuery https://tanstack.com/query/latest/docs/framework/react/guides/prefetching#prefetchquery--prefetchinfinitequery TanStack | High Quality Open-Source Software for Web DevelopersHeadless, type-safe, powerful utilities for c..
[TanStack Query / React Query] staleTime과 gcTime 이해하기: 데이터 캐싱 1. stale data 데이터의 사용 기간이 지났고, 다시 가져올 준비가(refetch) 되 있는 상태입니다여전히 데이터는 캐시 안에 있습니다데이터를 다시 검증해야 한다는 뜻데이터 새로 고침(refetch) 은 오래된 데이터( stale data )에 대해서만 트리거됩니다자동으로 데이터 새로 고침을 하는 트리거는 컴포넌트 remount 나 브라우져 창의 refocus가 있습니다staleTime 은 데이터의 최대 수명이라고 생각하면 됩니다그러므로 데이터 새로고침 기능을 컨트롤하고 싶다면 이와 관련된 useQuery 의 옵션 중 하나인 staleTime 을조절하면 됩니다(staleTime 이 2초 (2000 ms) 라면 2초 동안에는 데이터 새로 고침이 되지 않습니다 staleTime 은 default 로..
[TanStack Query / React Query] useQuery 훅의 isLoading isFetching isPending 차이 isPending: 캐쉬된 데이터가 없고 아직 쿼리가 수행되지 않은 경우입니다. isFetching: 비동기 쿼리 함수가 수행 중인 상태,  모든 데이터 로딩 상태에서 trueisLoading: (이전의 isInitialLoading) 캐쉬된 데이터가 없으며, 비동기 쿼리 함수가 수행 중인 상태 .                  그 말은 데이터의 첫 번째 로딩 시에만 true가 된다는 뜻 입니다.                 isPending && isFetching === isLoading   isPending && isFetching 라고 해서 처음에는 isLoading 에 대해 좀 헷갈렸는데.. isPending  과 isLoading은 쿼리의 수행 유무에 따라 반대값이 나오게 됩니다.  const..
[React] React Router의 useFetcher 훅 - 주요 속성 useFetcher는 페이지 전환 없이 서버와 데이터를 주고받을 수 있게 해주는 React Router의 훅입니다.useNavigate 훅과 세트로 기억하시면 좋습니다  1. fetcher.Formhttps://daunje0.tistory.com/201 [React] React Router의 Form vs fetcher.Formfetcher.Form은 페이지 전환 없이 백그운드에서 데이터를 변경하거나 제출해야 할 때 사용합니다. 1. 일반 Form페이지 전환이 발생 전체 페이지가 다시 로드됨 주로 주요 CRUD 작업에 사daunje0.tistory.com  2. fetcher.submit// 프로그래밍 방식으로 데이터 제출fetcher.submit( { email: 'test@test.com' }, ..
[React] React Router의 Form vs useFetcher().Form fetcher.Form은 페이지 전환 없이 백그운드에서 데이터를 변경하거나 제출해야 할 때 사용합니다. 1. 일반 Form페이지 전환이 발생 전체 페이지가 다시 로드됨 주로 주요 CRUD 작업에 사용 (예: 새 이벤트 생성, 이벤트 수정)2. useFetcher() .Form페이지 전환 없음 백그라운드에서 데이터 처리 주로 작은 업데이트나 부분적인 데이터 변경에 사용 (예: 좋아요 버튼, 구독 신청, 댓글 작성, 상태 토글 (예: 완료/미완료) )  예시 ) import { useFetcher } from 'react-router-dom';function NewsletterSignup() { const fetcher = useFetcher(); return ( 구독하기..
[React] React Router의 useNavigation 훅 - state와 주요 속성 useNavigation 이 훅은 페이지 탐색에 대해 알아야 할 모든 것을 알려주어 보류 중인 탐색 표시기와 데이터 변이에 대한 최적화된 UI를 구축할 수 있습니다. 글로벌 로딩 표시기변경이 발생하는 동안 양식 비활성화하기제출 버튼에 사용 중 표시기 추가하기서버에서 새 레코드가 생성되는 동안 새 레코드 상태를 낙관적으로 표시하기업데이트되는 동안 레코드의 새 상태를 낙관적으로 표시하기 1. navigation.state  현재 네비게이션 상태를 나타내는 속성입니다.3가지 상태 값 중 하나를 반환한다"idle" - 기본 상태, 현재 네비게이션이 진행되지 않고 있음"loading" - 데이터를 불러오는 중이거나 페이지 전환이 진행 중"submitting" - 폼 제출과 같은 데이터 변경 작업이 진행 중 보통의..
[Vue] useAttrs( ) : 하위 컴포넌트로의 속성 전달 (Composition API) 리액트에서 하위 컴포넌트에 속성 바인딩시아래와 같은 문법을 사용하다 보니 문득 궁금해졌다...// 부모 컴포넌트// 또는 특정 props만 전달   아.. vue 에서 같은 기능이 머더라... 기억이 나지 않는다;그래서 리마인딩 포스팅을 한다..  `useAttrs()` 또는 `setup` 컨텍스트를 통해 attrs에 접근할 수 있습니다.부모 컴포넌트에서 자식 컴포넌트로 여러 속성을 쉽게 전달할 때 유용합니다. `useAttrs()`를 사용하여 attrs에 접근`v-bind="attrs"`로 모든 속성을 한 번에 바인딩props로 선언된 속성은 attrs에 포함되지 않음 v-on 이벤트 리스너도 attrs에 포함됨컴포넌트 재사용성 향상에 매우 유용inheritAttrs 옵션으로 속성 상속 제어 가능   ..

티스토리툴바