Pinia를 통한 상태 관리는 어떻게 동작하나요?

Question

Accepted Answer

**Pinia**는 Vue의 공식 상태 관리 라이브러리입니다(Vuex의 후계자) — 많은 컴포넌트에서 공유해야 하는 상태를 위한 중앙 집중식 **스토어**로, Composition API 기반의 단순하고 타입 안전한 API를 제공합니다. ## 스토어 정의 ```js // stores/counter.js import { defineStore } from "pinia"; import { ref, computed } from "vue"; export const useCounterStore = defineStore("counter", () => { // 상태(state) const count = ref(0); // 게터(getter, 파생 상태) = computed const double = computed(() => count.value * 2); // 액션(action, 상태를 변경하는 메서드) function increment() { count.value++; } async function fetchInitial() { count.value = await api.getCount(); } return { count, double, increment, fetchInitial }; }); ``` 이 "setup 스토어"는 composable과 똑같이 생겼습니다 — 상태에 `ref`, 게터에 `computed`, 액션에 함수 — Composition API를 안다면 직관적입니다. ## 컴포넌트에서 스토어 사용 ```vue ``` **중요:** **상태/게터**를 구조 분해할 때는 `storeToRefs`를 사용하세요 — 일반 구조 분해는 반응성을 깨뜨립니다(`reactive`와 동일한 반응성 함정). 액션은 필요 없습니다. ## Pinia가 Vuex보다 나은 이유 ```text ✓ mutation 보일러플레이트 없음 — 액션이 상태를 직접 변경 가능 ✓ 뛰어난 TypeScript 추론 (Vuex는 타입 지정이 고통스러웠음) ✓ 설계상 모듈식 — 많은 작은 스토어, 중첩 모듈 복잡성 없음 ✓ Composition API 네이티브, 작은 API, devtools 지원 ``` ## 스토어 vs props/composable을 언제 쓸까 ```text props/emits → 부모 ↔ 자식 provide/inject → 하위 트리 내 공유 Pinia store → 전역/앱 전체 공유 상태 (인증 사용자, 장바구니, 설정) 많은 관련 없는 컴포넌트가 접근 ``` ## 왜 중요한가 Pinia는 Vue 앱의 **전역, 공유 상태**를 위한 표준 솔루션입니다 — 사용자/인증, 장바구니, 앱 설정, 캐시된 데이터 등 멀리 떨어진 많은 컴포넌트가 일관되게 읽고 업데이트해야 하는 모든 것. composable 스타일 API, 일급 TypeScript 지원, Vuex 보일러플레이트의 부재가 그것을 권장 선택지로 만듭니다. 상태가 진정으로 전역일 때 (props/inject 대신) Pinia를 선택하고, 구조 분해 시 반응성을 보존하기 위해 `storeToRefs`를 사용하는 것이 올바른 사용의 핵심입니다.