Zustand persist 마이그레이션 기준: 저장된 상태 구조가 바뀔 때
Zustand persist에서 저장된 상태 구조가 바뀔 때 version과 migrate가 필요한 기준을 정리합니다. 필드 추가, 필드명 변경, 중첩 구조 변경, 값 의미 변경, partialize 변경 사례를 중심으로 운영…
Zustand
Zustand 기본 개념부터 store 만들기, action 분리, selector 최적화, persist 적용, 리렌더링 오류 해결까지 순서대로 정리합니다. React 상태 관리를 가볍게 도입하려는 실무자를 위한 허브입니다.
총 15개의 글
Zustand selector 사용법: 필요한 상태만 가져와 리렌더링 줄이기
Zustand selector를 사용해 컴포넌트가 필요한 상태만 구독하는 방법을 정리합니다. 전체 store 구독의 문제, 여러 값을 가져올 때의 참조 비교, useShallow 적용 기준까지 필터 UI 예시로 설명합니다.
Zustand 리렌더링 원리와 selector 최적화 방법
Zustand 리렌더링 원리, selector 구독 구조, shallow 비교와 최적화 기준을 설명하는 개념형 글입니다.
Zustand 학습 로드맵: store·action·selector·persist 순서
Zustand를 적용할 때 로컬·전역 상태 경계부터 create store, action, selector, useShallow, persist와 Next.js hydration까지 순서대로 정리합니다.
Zustand 실무 사용 기준: store가 복잡해질 때 피할 실수
Zustand를 실무에서 사용할 때 전역 상태 범위, 서버 상태 분리, selector, persist, store 구조를 어떤 기준으로 점검해야 하는지 정리합니다.
Zustand persist 사용법: 새로고침 후 상태 저장하기
Zustand의 persist 미들웨어로 새로고침 후에도 상태를 유지하는 방법을 정리합니다. localStorage, partialize, hydration 흐름을 기준으로 저장할 상태와 저장하지 않을 상태를 구분합니다.
Zustand 상태 변경 후 리렌더링이 안 될 때 해결 방법
Zustand 상태 변경 후 화면이 바뀌지 않을 때 불변 업데이트, selector, shallow 비교를 순서대로 점검하는 오류 해결 글입니다.
Zustand action 사용법: 상태 변경 로직을 store로 분리하기
Zustand에서 action을 사용해 상태 변경 로직을 컴포넌트 밖으로 분리하는 기준을 정리합니다. 필터 상태 예시를 통해 set 함수, 토글, 초기화, action 이름 짓는 방식을 함께 다룹니다.
Zustand state 사용법: 값 읽기와 변경 흐름 익히기
Zustand에서 state를 읽고 action으로 변경하는 기본 흐름을 정리합니다. selector, set 함수, 이전 state 기준 업데이트, UI 상태 관리 예시까지 함께 다룹니다.
Zustand 설치 사용법: 기본 Store 만들고 상태 연결하기
Zustand를 React 프로젝트에 설치하고 `create`로 기본 Store를 만드는 흐름을 정리합니다. 상태와 액션을 Store 안에 구성하고 컴포넌트에서 필요한 값만 선택해 사용하는 기준을 다룹니다.