메로그

예시 코드리렌더링 발생사용 시점특징1. 전체 접근 (useStore())const { count, text } = useStore();✅ 상태 변화가 하나라도 있으면 전체 리렌더컴포넌트 내부간편하지만 성능에 불리함 (❌ 안티패턴)2. Selector 사용 (useStore(selector))const count = useStore((s) => s.count);const { count, inc } = useStore((s) => ({ count: s.count, inc: s.inc }));✅ 선택한 상태만 변경될 때 리렌더컴포넌트 내부✅ 성능 최적화에 가장 좋고, 공식 권장 방식3. getState() 접근const count = store.getState().count;❌ 리렌더 발생 안 함컴포넌트 외부..

zutand 는 react 상태 관리 라이브러리(중앙 집중형 스토어) 중 하나로, 최근 들어 redux 보다 편하고 가볍기 때문에 많이 사용하고 있는 추세입니다.우선 상태관리 라이브러리는 왜 쓰는지 알꺼기 때문에 디테일한 설명을 들어가지 않습니다~~.실제로 github stars 를 보면, 많은 사용자가 쓰고 있고 라이센스도 MIT 를 사용하고 있습니다. 설치yarn add zustand예제import { create } from "zustand";const counterStore = (set) => ({ count: 0, increment: (val) => set((state) => ({ count: state.count + (val ?? 1) })), decrement: (val) => set(..