상태관리 (5) 썸네일형 리스트형 [TanStack Query / React Query] setQueryData : Mutation 응답으로부터의 업데이트 https://tanstack.com/query/latest/docs/framework/react/guides/updates-from-mutation-responses TanStack | High Quality Open-Source Software for Web DevelopersHeadless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.tanstack.com공식 문서를 번역한 글입니다. Mutation 응답으로부터의 업데이트 서버의 객체를 업데이트하는 mutation을 다룰 때, 새로운 객체가 일반적으로 mutati.. [TanStack Query / React Query] useQuery 훅의 isLoading isFetching isPending 차이 isPending: 캐쉬된 데이터가 없고 아직 쿼리가 수행되지 않은 경우입니다. isFetching: 비동기 쿼리 함수가 수행 중인 상태, 모든 데이터 로딩 상태에서 trueisLoading: (이전의 isInitialLoading) 캐쉬된 데이터가 없으며, 비동기 쿼리 함수가 수행 중인 상태 . 그 말은 데이터의 첫 번째 로딩 시에만 true가 된다는 뜻 입니다. isPending && isFetching === isLoading isPending && isFetching 라고 해서 처음에는 isLoading 에 대해 좀 헷갈렸는데.. isPending 과 isLoading은 쿼리의 수행 유무에 따라 반대값이 나오게 됩니다. const.. [React] Redux에서 비동기 작업 처리하는 3가지 방법 Redux 의 Reducers 함수는 다음과 같은 조건이 있습니다.순수함수여야 하며, 사이트 이펙트에 영향을 받지 않아야 하고, 동기적인 코드여야만 한다는조건이 바로 그것입니다. 이는 react 의 useReducer 함수도 같은 조건입니다.그럼 Redux 사용시, 이런 비동기 코드는 어디에서 작성해야하는 걸까요? 3가지 방법이 있습니다. 1. 컴포넌트 내에 useEffect() 함수를 사용하여 직접 정의2. 사용자 정의 action 을 사용( 커스텀 액션 생성자 (Thunk) )3. createAsyncThunk 사용( redux toolkit 만 가능) 1. 비동기 코드 예시 1-1. 컴포넌트 내에 useEffect() 함수를 사용하여 직접 정의const Component = () => { c.. [React] Redux: App-Wide State와 Cross-Component State 관리 가이드 1. Redux 상태 관리의 기본 개념 client state( 웹 브라우저 세션과 관련된 모든 정보) 는 사용 범위에 따라 3가지로 나뉩니다 1. local state 2. cross-component state3. app-wide state 1.1. Local State (지역 상태) 단일 컴포넌트 내에서만 사용되는 상태 useState, useReducer 훅을 사용하여 관리 폼 입력 상태토글 상태 (열기/닫기) UI 상태function Component() { const [isVisible, setIsVisible] = useState(false); // 이 상태는 이 컴포넌트 내에서만 사용됨} 1.2. Cross-Component State (교차 컴포넌트 상태) 여러 컴포넌트 간에 공.. [Vue2] Vuex 에 관하여 Vuex란? 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리 React의 Flux 패턴에서 기인함 Vuex가 필요한 이유 복잡한 애플리케이션에서 컴포넌트의 개수가 많아지면 컴포넌트 간에 데이터 전달이 어려워진다. 로그인 폼에서 id를 하위 컴포넌트로 계속해서 전달해서 내려야 할 때, 중간에 거치는 컴포넌트들이 많아 질수록 계속해서 props를 선언해야 하므로 데이터 전달이 불편해진다. 이벤트 버스로 해결? 어디서 이벤트를 보냈는지 혹은 어디서 이벤트를 받았는지 알기 어렵다. // Login.vue eventBus.$emit('fetch', loginInfo); // List.vue eventBus.$on('display', data => this.displayOnScree.. 이전 1 다음
