Pinia란 무엇인가요? – Vue 공식 상태 관리 라이브러리 소개

 

Vue 3의 공식 상태 관리 라이브러리로 채택된 Pinia는 기존의 Vuex를 대체하거나 함께 사용할 수 있는 경량의 모던한 상태 관리 도구입니다. Vuex보다 더 직관적이고, TypeScript와의 궁합이 좋으며, 학습 곡선도 완만하다는 장점 덕분에 많은 Vue 개발자들이 Pinia로 빠르게 전환하고 있습니다.

1. Pinia의 탄생 배경

Vue 2 시절의 대표 상태 관리 도구는 Vuex였습니다. 하지만 Vuex는 Boilerplate가 많고 TypeScript 지원이 미흡해 유지보수가 어려웠습니다. 이를 해결하고자 Vue 팀은 Composition API와 더 잘 어울리는 상태 관리 도구를 고민했고, 그 결과가 바로 Pinia입니다.

💡 Pinia는 pineapple(파인애플)의 줄임말처럼 들리지만, 실제로는 "a store you can pin anywhere"라는 의미에서 만들어졌습니다.

 

---

2. Pinia의 특징

✅ 가벼움과 단순함

Pinia는 내부 구현이 매우 가볍고, API도 직관적입니다. 단순한 store 생성과 사용이 가능합니다.

✅ Composition API 완벽 지원

Vue 3의 핵심 개념인 Composition API와 자연스럽게 통합되며, setup() 함수 안에서 손쉽게 사용 가능합니다.

✅ TypeScript와의 뛰어난 호환성

Type 추론이 훌륭하게 작동하여 별도 타입 정의 없이도 안전한 코드를 작성할 수 있습니다.

✅ DevTools 통합

Vue DevTools와 통합되어 상태 추적과 디버깅이 편리합니다.

✅ 모듈 시스템 기반

store를 여러 모듈로 나눠서 관리할 수 있어 유지보수가 쉽습니다.

---

3. 기본 사용법

1) 설치

npm install pinia

Vue 앱에 Pinia를 등록해줍니다.

// main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

 

2) Store 정의

// stores/counter.ts
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

3) Store 사용

// components/MyComponent.vue
<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <p>Double: {{ counter.doubleCount }}</p>
    <button @click="counter.increment">+</button>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()
</script>

---

4. Pinia vs Vuex

항목	Pinia	Vuex
Vue 공식 지원	✅ (Vue 3 공식 상태관리)	✅
타입 지원	✅ 매우 우수	❌ 수동 타입 선언 필요
코드 복잡도	✅ 간단한 API	❌ boilerplate 많음
모듈 분리	✅ 자유롭게 분리 가능	✅ namespaced 방식 필요
학습 난이도	👍 쉬움	👎 상대적으로 어려움

---

5. 언제 Pinia를 써야 할까?

• Vue 3 기반의 프로젝트를 시작할 때
• Vuex를 쓰기엔 복잡하고 무겁다고 느껴질 때
• Composition API와 상태관리를 함께 쓰고 싶을 때
• 타입 안정성과 코드 간결성이 중요한 프로젝트에서

---

결론

Pinia는 Vue 3 시대에 꼭 맞는 상태 관리 도구입니다. React의 Zustand나 Recoil처럼 간단하면서도 강력한 기능을 제공하며, 기존 Vuex의 단점을 커버합니다. Vue 3 프로젝트를 시작한다면, Pinia를 기본 선택지로 고려해 보세요.