Zustand Store 타입 지정: TypeScript로 state와 action 안전하게 관리하기
이 글에서 정리하는 내용 Zustand Store에 TypeScript 타입을 붙일 때는 상태 값만 보는 것으로 끝나지 않습니다. Store가 어떤 값을 가지고, 그 값을 어떤 action으로만 바꿀 수 있는지 하나의 계약으로 잡아야 합니다. 작은 카운터 Store에서는 차이가 늦게 보이지만, 유저 정보·모달·필터·장바구…
더 읽기Zustand
Zustand의 기본 개념, 전역 상태 관리 방식, store 구성, React 프로젝트 적용 방법, Redux Toolkit과의 차이점을 정리한 카테고리입니다. 간단하고 가벼운 상태 관리가 필요한 상황을 중심으로 다룹니다.
Zustand React 리렌더링 기준: 상태 변경이 화면에 반영되는 흐름 이해하기
이 글에서 정리하는 내용 Zustand를 사용할 때 리렌더링을 판단하는 기준을 React 렌더링 흐름과 연결해서 정리합니다. store 전체가 바뀌었는지가 아니라, 컴포넌트가 어떤 값을 선택해서 구독하고 있는지가 핵심입니다. React 리렌더링부터 확인해야 하는 이…
더 읽기
Zustand 리렌더링 문제 해결: 상태 변경 후 화면이 바뀌지 않을 때
Zustand 상태를 바꿨는데 리렌더링되지 않는 이유에서 먼저 확인할 것 Zustand 상태를 바꿨는데 리렌더링되지 않는 이유는 단순히 한 줄 코드를 바꾸는 문제로 끝나지 않습니다. Zustand store 값은 바뀐 것 같은데 컴포넌트가 다시 그려지지 않는 상황을…
더 읽기
Zustand 실무 사용 기준: store가 복잡해질 때 피할 실수
이 글에서 정리하는 내용 Zustand는 문법이 짧아서 프로젝트에 빠르게 붙일 수 있지만, 실무에서는 어떤 상태를 전역 store에 넣을지 먼저 정하지 않으면 구조가 쉽게 흐려집니다. 이 글은 Zustand를 사용할 때 상태 범위, 서버 상태 분리, selector, …
더 읽기
Zustand persist 사용법: 새로고침 후 상태 저장하기
이 글에서 정리하는 내용 Zustand의 persist 미들웨어로 새로고침 후에도 상태를 유지하는 방법을 정리합니다. 코드 사용법 자체보다 어떤 상태를 브라우저 저장소에 남겨도 되는지, 어떤 상태는 매번 초기화하는 편이 나은지에 초점을 맞춥니다. 상태는 store에…
더 읽기
Zustand 리렌더링 문제 해결: 상태 변경 후 화면이 바뀌지 않을 때
Zustand 리렌더링 문제는 변경 감지 기준부터 봐야 합니다 Zustand에서 store 값을 바꿨는데 화면이 그대로라면 먼저 “값이 바뀌었는가”와 “컴포넌트가 구독한 값이 바뀐 것으로 비교되었는가”를 나눠 봐야 합니다. 객체나 배열을 직접 수정하면 내부 값은 달라져…
더 읽기
Zustand action 사용법: 상태 변경 로직을 store로 분리하기
이 글에서 정리하는 내용 Zustand에서 action은 별도의 action 객체를 만드는 절차가 아니라, store 안에 상태 변경 규칙을 함수로 모아두는 방식입니다. 필터 상태 예시를 기준으로 컴포넌트에 흩어진 변경 로직을 action으로 옮기는 기준을 정리합니다.…
더 읽기
Zustand state 사용법: 값 읽기와 변경 흐름 익히기
이 글에서 정리하는 내용 Zustand store를 만든 뒤 컴포넌트에서 state를 읽고 action으로 변경하는 흐름을 정리합니다. 단순히 값을 가져오는 문법보다, 컴포넌트가 어떤 값에 의존하는지 좁히고 변경 규칙을 store 안에 모으는 기준을 중심으로 봅니다. …
더 읽기
Zustand 설치 사용법: 기본 Store 만들고 상태 연결하기
이번 단계에서 정리하는 내용 Zustand를 React 프로젝트에 설치하고, 컴포넌트 밖에 기본 Store를 만든 뒤 필요한 상태와 액션만 꺼내 쓰는 흐름을 정리합니다. 설치 명령어보다 더 오래 남겨야 할 기준은 안에서 상태와 상태 변경 함수를 어떤 책임으로 묶을지입니…
더 읽기
Zustand 사용 기준: React 상태 관리가 복잡해질 때 선택하기
이 글에서 정리하는 내용 Zustand를 사용하는 이유를 React 상태 관리 흐름 안에서 정리합니다. 단순히 “Redux보다 쉽다”는 장점 나열이 아니라, 상태가 여러 컴포넌트로 퍼질 때 props, Context, TanStack Query와 어떤 기준으로 역할을 …
더 읽기