로그인 요청을 서버로 보내고 나서, 성공할 경우 user 정보를 관리하는 zustand store에 정보를 업데이트하기위해 zustand의 훅을 사용했다. 그런데 ESLint에서 아래와같은 오류가 떴다! ESLint: React Hook "useUserStore" is called in function "onSuccess" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".(react-hooks/ rules-of-hooks) 리액..
Life Cycle fresh데이터를 새로 패칭할 필요가 없는 상태입니다. **staleTime**이 지나지 않은 상태로, 캐시 데이터를 그대로 사용할 수 있습니다.stale데이터를 새로 패칭해야 하는 상태입니다. **staleTime**이 지난 후로, 새로운 데이터를 가져오기 위해 쿼리가 실행됩니다.기본 staleTime 은 0으로 설정돼있음! (바로 stale 상태가 됨)active현재 컴포넌트에서 사용 중인 쿼리 상태입니다. 컴포넌트가 마운트되어 쿼리를 사용하고 있을 때를 말합니다.inactive더 이상 사용되지 않는 쿼리 상태입니다. 컴포넌트가 언마운트되거나 쿼리가 더 이상 필요하지 않을 때를 말합니다.deleted캐시에서 제거된 쿼리 상태입니다. gcTime(cache Time) 이 지나면 쿼리..
서버상태 관리를 위한 라이브러리데이터를 패칭하고 캐싱, 동기화, 무효화 등의 기능을 제공이전보다 비동기 로직을 간편하게 작성하고 유지보수성을 높일 수 있음 주요 기능1) 데이터 캐싱: 동일한 데이터를 여러번 요청하지 않도록 캐싱하여 성능을 향상시킴2) 자동 리페칭: 데이터가 변경되었을 때 자동으로 리페칭하여 최신상태를 유지3) 쿼리 무효화: 특정 이벤트가 발생했을 때 쿼리를 무효화하고 데이터를 다시 가져올 수 있음 사용해보기주요 hooks1) get: useQuery2) modify: useMutation3) refresh: invalidateQueries 설치yarn add @tanstack/react-query ProviderQueryClientProvider로 서버상태의 영향권에 들어올 App ..