Pinia는 Vue의 Store 라이브러리로, 컴포넌트/페이지 간 state를 공유할 수 있게 해줍니다.
1️⃣ Pinia(상태관리 라이브러리)를 쓰는 이유
상태관리 라이브러리를 꼭 써야 한다고 하지만, 반드시 필수 X
대신, 다음과 같은 상황에서 사용하면 유용합니다.
- props와 custom event로 데이터 주고받기가 힘들 때
- Pinia를 설치하면 하나의 스토어 파일에 모든 데이터를 저장할 수 있습니다.
- 모든 컴포넌트가 직접 해당 데이터를 꺼내쓰고 수정할 수 있어, 굳이 props를 통해 데이터를 전달할 필요가 없습니다.
- Vue 파일과 데이터가 너무 많을 때
- 수많은 컴포넌트에서 공통 데이터를 사용하다 문제가 생기면, 개별 컴포넌트를 일일이 뒤져야 합니다.
- Pinia를 사용하면 데이터를 한 곳에서 관리하고 수정 방법도 중앙 집중화되므로 디버깅이 훨씬 쉬워집니다.
- 큰 프로젝트에서는 매우 유용하지만, 간단한 프로젝트에서는 오히려 과할 수 있습니다.
2️⃣ Pinia 설치 및 셋팅
2-1. Pinia 설치
- Pinia는 Vue3 전용 상태관리 라이브러리로, 공식 문서에서 설치 방법을 확인할 수 있습니다.
- 설치 명령어 예시:
npm install pinia
2-2. 스토어 파일 생성
예시: src/store.js
// src/store.js
import { defineStore } from 'pinia'
// `defineStore()`의 반환값에 원하는 대로 이름을 지을 수 있지만,
// `use`로 시작해 `Store`로 끝나는 Store의 이름을 사용하는 것이 좋습니다.
// (예: `useUserStore`, `useCartStore`, `useProductStore`)
// 첫 번째 인수는 애플리케이션 내 Store의 고유 ID입니다.
export const useMainStore = defineStore('main', {
state: () => ({
// 여기에 데이터를 저장합니다.
// 예시: count: 0, name: ''
}),
// 필요에 따라 getters, actions도 추가 가능
})
2-3. main.js에 Pinia 등록하기
Vue3에서는 main.js에서 Pinia를 생성해 앱에 등록해야 합니다.
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.mount('#app')
※ 등록하지 않으면 스토어에 접근할 수 없으므로 반드시 추가해야 합니다.
3️⃣ 컴포넌트에서 Pinia 스토어 사용하기
Vue3의 <script setup> 문법을 사용하여 Pinia 스토어를 불러올 수 있습니다.
<template>
<div>
<!-- 템플릿에서 스토어 데이터 출력 -->
<p>{{ mainStore.someData }}</p>
</div>
</template>
<script setup>
import { useMainStore } from '@/store' // store.js의 경로에 맞게 조정
const mainStore = useMainStore()
// 일반 함수나 라이프사이클 훅 등에서 mainStore.someData로 접근 가능
</script>
- 데이터 저장: 스토어 파일(
store.js)에 데이터를 정의합니다. - 데이터 출력: 템플릿에서는
{{ mainStore.데이터명 }}으로 사용합니다. - JS 코드 내 사용: 함수나 setup 내부에서는
mainStore.데이터명으로 접근합니다.
📌 정리
- 필수 라이브러리 아님: Pinia(이전에는 Vuex)를 반드시 써야 하는 건 아니지만,
- props나 custom event로의 데이터 전달이 번거롭거나
- 많은 컴포넌트와 데이터가 엉켜 있을 때
사용하면 관리와 디버깅이 쉬워집니다.
- Vue3 문법 활용:
<script setup>문법으로 간결하게 스토어를 불러와 사용할 수 있습니다. - 중앙 집중화: 한 곳에 데이터를 모아 관리하므로, 여러 컴포넌트에서 공통 데이터를 편리하게 다룰 수 있습니다.
