minstudio

전역 상태 관리: useState와 Pinia의 완벽한 조화

useState vs Pinia

Nuxt에서 제공하는 useState는 SSR 환경에서 서버와 클라이언트 간의 상태를 직렬화하여 Hydration 에러를 막아주는 가벼운 상태 관리 도구입니다. 하지만 복잡한 비즈니스 로직(Actions)이나 파생 상태(Getters)가 필요할 때는 Pinia 모듈을 도입하는 것이 실무 표준입니다.

도구	주요 목적	적합한 사용 사례
useState	SSR 친화적인 가벼운 전역 상태 공유	다크모드 토글, 단순한 토스트 메시지 상태, 모달 열림 여부
Pinia	복잡한 로직과 구조화된 스토어 관리	로그인된 유저 정보, 쇼핑몰 장바구니 관리, 대규모 데이터 캐싱

<div class="app-container">
  <h3>상태 관리 데모</h3>
  
  <div class="card useState-card">
    <h4>[useState] 테마 상태</h4>
    <p>현재 테마: <strong id="themeText">Light</strong></p>
    <button id="toggleThemeBtn" class="btn btn-blue">테마 토글</button>
  </div>

  <div class="card pinia-card">
    <h4>[Pinia] 장바구니 스토어</h4>
    <p>상품 수량: <strong id="cartCount">0</strong>개</p>
    <div class="btn-group">
      <button id="addCartBtn" class="btn btn-green">추가 (+1)</button>
      <button id="resetCartBtn" class="btn btn-red">초기화</button>
    </div>
  </div>
</div>

🔒 localhost:8000/preview

전역 상태 관리: useState와 Pinia의 완벽한 조화 | Minstudio