Zustand 2

전등, 스위치, 전선으로 이해하는 Zustand 전역 UI 참조

1. 목표 개요 전역 UI 컴포넌트(예: 온보딩 모달, 토스트, 로딩 스피너 등)를 Zustand를 통해 상태로 제어하는 건 잘 알려진 프론트엔드 개발론이다.실제 렌더링은 단일 위치에서만 구독하도록 구성하는 방식을 공부했으며, Next.js(App Router)와 Vite + React에서의 사용차이점도 비교해보았다. 실제 AITUTOR 서비스의 온보딩(튜토리얼) 모달을 사용자가 어디 페이지에 있든 전역적으로 컴포넌트를 렌더링해야하는 모달을 만들어렌더링하는 것이 목적이다.2. 상태 관리: Zustand store 예시Store 함수를 만들어, 전역 상태관리 스토어를 만든다.이 상태들을 사용하는 쪽에서는 store 함수를 마치 커스텀 훅처럼 사용하기에, zustand custom Hook이라고도 불린다. ..

Zustand X Generic 심층분석.

Zustand create 완전 정복을 위하여..늘 context API로 전역상태 관리를 활용하던 내가 , zustand 공식문서를 읽어보며 zustand 활용법을 공부했다. zustand에는 Generic type으로 선언된 함수가 매우많아서 Generic 관련 내용 또한 매우 중요하다고 판단하여 같이 콜라보하여 공부했다.1. 제네릭이란 무엇인가?TypeScript에서 흔히 보이는 함수 형태는 제네릭(Generic) 문법입니다.function identity(value: T): T { return value;}identity('hello'); // ✉️ T = string → 매개변수도, 리턴값도 string즉, T라는 타입은 함수 선언부에서 고정하지 않고, 호출할 때 지정할 수 있는 타입 매개변수..