[노트장] 적으며 정리해 보는 이론/React Query4 [React Query] useMutation ◼ useMutation mutation은 사이드 이펙트를 가진 함수를 의미합니다. DB에 새로운 값을 추가, 삭제, 수정하는 작업도 사이드 이펙트에 해당됩니다. 이는 이러한 작업이 애플리케이션의 상태나 UI에 직접적인 영향을 미치지 않는다는 의미입니다. 즉, DB의 값이 변한다고 해서 자동으로 렌더링이 일어나는 것은 아닙니다. 이런 사이드 이펙트를 관리하기 위해 `useMutation` 훅을 사용하며, 주로 CRUD(CUD) 작업에 사용됩니다. useQuery는 데이터를 가져오는 데 사용되며, 컴포넌트가 마운트 되었을 시 자동으로 실행되거 가져옵니다.반면. useMutation은 데이터 수정, 삭제 등 요청을 할때 사용되며, 특정 이벤트 실행할때 mutate() 콜백함수를 통해 트리거 하여 useMut.. 2024. 6. 19. [React Query] invalidateQueries ◼ InvalidataQueries useMutation을 이용해서 실제 DB에 값을 전달을 하였지만, 화면은 실시간으로 랜더링이 되지 않습니다.그래서 같이 사용해야 하는 함수가 InvalidataQueries함수 입니다.앞서 설명한 것 처럼 ReactQuery는 캐시(임시저장소)가 있으며, 그 관리를 스스로 합니다.useMutation를 사용해서 DB에 데이터를 업데이트를 하였지만, Reat Query는 그 사실을 알지 못합니다.그렇기 때문에 변경 되어서 다시 데이터를 가지고 올수 있도록 실행 시키는 함수입니다.이 함수를 사용하면, 업로드를 하였을때 Reat Query가 인지하여, refetch를 하도록 설정할 수 있습니다. 실행 단계 Mutation 실행: useMutation 훅을 사용하여 데이터를.. 2024. 6. 19. [React Query] IsError, IsPending, retry ◼ IsError, IsPending, retry const { data, // 값 isPending, // 로딩중 isError, // 에러남} = useQuery({ queryKey: ['k'], // ['key이름'] queryFn: getApi, // api 호출 retry:0 // 0번 호출});if (isPending) return '로딩 중입니다...';if (isError) return '에러가 발생했습니다.';retry:0 // 에러가 나면 기본 3번 더 시도를 한다. 0이면 더이상 호출하지 않는다는 의미 2024. 6. 19. [React Query] React Query ◼ React Query React Query는 클라이언트 측에서 서버 상태 관리를 간편하고 효율적으로 도와주는 라이브러리입니다. 캐싱, 동기화, 백그라운드 업데이트 등을 자동으로 처리해주기 때문에 클라이언트와 서버 간의 데이터 전달과 관리가 편해집니다. 서버 상태 데이터는 비동기적으로 받아와야 하며, 로딩 중에는 로딩 화면을 보여주고, 에러 발생 시 이를 처리하고 사용자에게 안내해야 합니다. 또한, 서버 상태 데이터는 가능한 최신 상태를 유지해야 하며, 이는 사이트의 성격에 따라 주기적으로 업데이트될 필요가 있습니다. 이러한 특성 때문에 서버 상태 데이터를 관리하는 것은 복잡합니다. 기존의 Redux 같은 라이브러리에서는 이러한 관리를 쉽게 할 수 없었지만, 리액트 쿼리를 사용하면 각각 따로 처리해야 .. 2024. 6. 18. 이전 1 다음
