React11 [React Query] 데이터는 언제 fetch 될까? - (2) Refetch (1) Fresh와 Stale 상태 보러가기 이번에는 useQuery를 통해서 저장 된 데이터를 변경하는 메서드에 대해서 알아볼 예정이다. 대표적으로 다음과 같이 3개의 메서드가 존재한다.setQueryDatainvalidateQueriesrefetchQueries 🎈 자동 Refetch 되는 시점 알아보기쿼리의 상태가 stale 상태가 되더라도 즉시 refetch 되지 않는다. refetch 되는 시점을 알아야 문제가 발생했을 때 무엇이 문제인지 파악하기 쉬워진다. 자동적으로 refetch가 되는 조건은 다음과 같다.쿼리를 사용하는 컴포넌트가 마운트될 때윈도우가 포커스 될 때네트워크가 재연결 될 때refetchInterval 설정을 통해 요청할 때 stale 상태인 쿼리가 위의 조건을 만족할 때 .. 2025. 5. 11. [React Query] 데이터는 언제 fetch 될까? - (1) Fresh와 Stale 상태 (2) Refetch보러가기 🛫 Fresh와 StaleTanstack Query에서는 캐시한 데이터를 Fresh, Stale 상태로 관리를 한다. ✅ Fresh쿼리가 fetch가 되면 Fresh 상태가 되며 해당 상태인 동안에는 쿼리가 신선한것으로 간주하여 해당 데이터를 요청하면 캐시된 데이터를 사용하하고 다시 fetch하지 않는다. ReactQueryDevtools를 통해 확인해보면 아래와 같이 데이터가 초록색인게 Fresh 상태이다. ✅ StaleFresh 상태인 쿼리가 staleTime으로 설정된 시간이 지나면 stale 상태가 된다. 해당 상태는 신선하지 않은 것으로 간주하게 되며, 이 상태인 쿼리를 요청하면 fetch를 통해서 데이터를 가져오도록하게 된다. ReactQueryDev.. 2025. 5. 10. [React] memo, useCallback 사용해보기 React.memo, useCallback, useMemo 는 리액트 성능 향상을 위해서는 빠지지 않고 등장하는 기능들이다. 이번에는 memo, useCallback를 사용해서 컴포터넌트의 리렌더링 발생을 줄여나가는 방법에 대해서 알아보려고 한다. 예제로 사용 될 컴포넌트는 다음과 같다. 기능은 각 버튼 클릭 시 클릭한 횟수를 보여주는 아주 간단한 기능이다. 그리고 두개의 버튼을 클릭한 횟수 전체를 보여주는 sum 도 제공한다.import "../App.css";import { useState } from "react";const Performance1 = () => { const [sum, setSum] = useState(0); const [count1, setCount1] = useState(0.. 2025. 4. 16. [React] 함수를 상태에 저장하기 🎈 상황리액트의 상태로 함수를 저장해야하는 경우가 생겼다. 여느 상태 저장과 마찬가지로 아래와 같이 코드를 구현하였다. 아래는 버튼을 클릭하면 state이라는 값을 fn 상태에 저장하는 간단한 기능이다.const App = () => { const [fn, setFn] = useState(null); const handleClick = () => { const state = () => { console.log('함수저장'); }; setFn(state); }; return 버튼} 하지만 위의 코드를 실행 후 fn에는 undefined만 저장 되어있고, 함수를 호출하지 않았는데 console이 호출 되는 현상이 발생하였다. 📯 원인 파악문제의 원인은 바로 s.. 2025. 3. 19. [Zustand] Zustand 리렌더링 최근 쉽고 빠르게 저장소를 구축할 때 zustand를 많이 사용하는 듯 하다. 사용하는 방법도 매우 간편하다.const useStore = create((set) => ({ count: 0, num: 1, setNum: () => set({ num: 1 }), increase: () => set((state) => ({ count: state.count + 1 })), decrease: () => set((state) => ({ count: state.count - 1 })) })) 컨텍스트 API나 Redux 등 대부분의 스토어를 사용하게 되면 Provider를 통해서 상태를 관리하고 하위 컴포넌트에게 상태를 전달하는 방식을 사용한다. 하지만 Zustand는 Provider를 사용하지 않는다... 2025. 3. 7. [React] Context API 성능개선 🎈 간단 설명Context API는 리액트 라이브러리에 내장 된 API로, 중첩된 컴포넌트에서 부모 컴포넌트의 상태를 자식 컴포넌트에게 좀 더 쉽고 간편하게 전달하기 위해서 제공된다. Context의 값이 변경되는 경우 동일한 Context를 사용하는 모든 컴포넌트에서 리렌더링 되는 문제가 존재한다. 👓 Context API 성능 개선의 오해구글에서 Context API의 성능 문제 해결로 검색해보면 React.memo 또는 useCallback, useMemo를 사용하면 성능 개선이 된다는 글이 많이 보인다. 그래서 나는 React.memo 또는 useCallback, useMemo 를 사용하면, 위에서 동일한 Context를 사용하는 경우에 대한 문제를 해결할 수 있을 거라고 오해했었다. 다음.. 2025. 2. 15. 이전 1 2 다음
