사용법설치yarn add zustand store 생성1) zustand 폴더 > bearsStore.js 생성 2) zustand의 create를 사용해 스토어 생성 (이 때 스토어는 관리할 상태에 따라 여러개가 될 수 있음)import { create } from 'zustand';const useBearStore = create((set) => { return { bears: 0, increase: function() { set(function(state) { return { bears: state.bears + 1 } }) }, // 초기화용 함수 init: function (){ set({ ..
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 ..
axiosnode.js 와 브라우저를 위한 Promise 기반 http 클라이언트http를 이용해 서버와 통신하기 위해 사용하는 패키지 axios 설치yarn add axios json-server 설정content 부분 없애기 요청GET이제 response.json()으로 json을 해석하는 과정이 필요없다 POST id는 랜덤 string으로 생성됨 DELETE- axios로 서버에 delete 요청- 브라우저 화면에서도 사라지도록 삭제한 id의 todo를 state에서 filter 해줌 PATCH- PATCH: 원래 있던 값에서 원하는 값만 업데이트 (일부수정)- PUT: 기존 값을 무시하고 완전 수정 Custom Instance위 내용들은 기타 설정을 전혀 적용하지 않은 순수한 Axios를 사용..
Promise.all(처리할 비동기 작업의 배열)function App() { useEffect(() => { Promise.all([ fetch(url).then(response => response.json()), fetch(url2).then(response => response.json() ]).then(function([response1, response2]) => { console.log("response 1: ", response1); console.log("response 2: ", response2); }); }, []);}-> Promise.all을 이용해 두가지 fetch를 동시에 실행-> response 또한 배열로 반환되기 때..