공부/상태 관리 (6) 썸네일형 리스트형 전역 상태 관리, 정말 필요한가? 현대 프론트엔드 개발에서는 저역 상태 관리 도구의 사용이 일반적입니다.하지만 모든 프로젝트에서 전역 상태 관리가 필요하다고는 생각하지 않습니다. 이 글에서는 전역 상태 관리가 왜 필요한지, 언제 사용하는 것이 적합한지에 대해 소개해보려고 합니다.1. 전역 상태란? 📖전역 상태는 앱의 여러 컴포넌트가 공통으로 사용하는 데이터를 의미합니다. 예를 들어로그인된 사용자 정보쇼핑몰의 장바구니 데이터다크 모드와 같은 UI 설정 이러한 데이터는 앱 전반에서 공유되며, 여러 컴포넌트에서 접근하고 수정할 수 있어야 합니다. 2. 전역 상태 관리가 필요한 경우?📖전역 상태 관리가 필요한지 판단하려면 데이터의 범위와 복잡성을 고려해야 합니다. 데이터가 여러 컴포넌트에서 사용될 때예) 로그인된 사용자 정보헤더에서 사용자.. Zustand 동작 원리 알아보기 오늘은 zustand가 내부적으로 어떻게 동작하는 알아보기 위해 zustand github를 확인해 봤습니다. GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React🐻 Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub.github.com 파일이 타입스크립트로 작성되어 있는데 보기 편하기 위해 GPT의 힘을 빌려 자바스크립트로 변경했습니다. react.ts 📖`react.ts`파일의 전체 코드이고, React와의 연동을 해줍니다.import ReactExp.. Zustand 알아보기 Zustand 📖Zustand는 React 애플리케이션에서 상태 관리를 쉽게 할 수 있게 도와주는 가벼운 상태 관리 라이브러리입니다.설치yarn add zustand 사용 방법사용 방법은 이게 끝입니다! 정말 간단하죠!// src > store > bearsStore.jsimport { create } from "zustand";const useBearsStore = create((set) => ({ bears: 0, increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), removeAllBears: () => set({ bears: 0 }),}));export default useBearsStore;// src > App... TanStack Query 알아보기 3 (Query Cancellation, Optimistic Updates, Prefetching, Paginated, Infinite Queries) Query Cancellation 📖불필요한 네트워크 요청을 제거하기 위해 사용합니다. 대용량 fetching을 중간에 취소하거나 사용하지 않는 컴포넌트에서 fetching이 진행 중이면 자동으로 취소시켜 불필요한 네트워크 비용을 줄일 수 있습니다. queryFn의 매개변수로 Abort`Signal`을 받을 수 있고 이를 활용해 Query 취소가 가능합니다. 사용 방법queryFn은 매개변수로 `QueryFunctionContext`객체를 받습니다.export const getTodos = async (queryFnContext) => { const { queryKey, pageParam, signal, meta } = queryFnContext; // queryKey: 배열형태의 쿼리키 // pag.. TanStack Query 알아보기 2 (동작 원리) SWR 전략 📖stale을 사전에 검색해 보면 `신선하지 않은``오래된`이라는 뜻을 가지고 있습니다. 말 그대로 `SWR(stale while revalidate)`은 최신 데이터가 도착하기 전까지 기존 캐시 데이터를 사용하는 전략입니다. ❓그런데 이`캐시 데이터`어디에 보관되는 걸까요캐시 데이터 📖TanStack Query는 `캐시 데이터`를 전역적으로 관리합니다. `QueryClientProvider`를 사용해 React 애플리케이션 전체에서 캐시 데이터에 접근할 수 있습니다. 이렇게 될 수 있는 이유는 TanStack Query는 내부적으로 `React Context API`를 사용해 구현되어 있어서 모든 자식 컴포넌트가 캐시 데이터에 접근할 수 있기 때문입니다. 데이터 흐름 ✨ 주요 흐름 ✨ .. TanStack Query 알아보기 1 (기본 사용법) TanStack Query 📖서버 상태를 관리하기 위한 라이브러리로 서버 상태를 페칭, 캐싱, 동기화, 업데이트하는 작업을 아주 쉽게 해 줍니다.주요 기능`데이터 캐싱`: 동일한 데이터를 여러 번 요청하지 않도록 캐싱하여 성능을 향상합니다.`자동 리페칭`: 데이터가 변경되었을 때 자동으로 리페칭하여 최신 상태를 유지합니다.`쿼리 무효화`: 특정 이벤트가 발생했을 때 쿼리를 무효화하고 데이터를 다시 가져올 수 있습니다. 사용 방법 📖설치yarn add @tanstack/react-query 적용할 범위에 Provider를 이용해 적용합니다.// main.jsximport ReactDOM from "react-dom/client";import App from "./App.jsx";import "./ind.. 이전 1 다음
