PINIA

피니아(Pinia)란?

피니아(Pinia)는 Vue.js 애플리케이션에서 상태 관리를 위한 공식 라이브러리입니다. Vuex의 후속으로 개발되었으며, Vue 3와의 호환성을 염두에 두고 설계되었습니다. Vuex보다 더 간단하고 직관적인 API를 제공하며, TypeScript 지원이 뛰어나고 보일러플레이트 코드가 적다는 점에서 많은 개발자들에게 인기를 얻고 있습니다.

주요 특징

1. 간단한 API: 스토어(상태 저장소)를 정의하는 과정이 직관적이고 간결합니다.
2. 모듈화: 각 스토어를 독립적으로 정의할 수 있어 코드 분리가 용이합니다.
3. Vue 반응성 활용: Vue의 반응형 시스템을 기반으로 작동하므로 상태 변화가 UI에 자동으로 반영됩니다.
4. TypeScript 지원: 타입 추론이 뛰어나 타입 안전성을 보장합니다.
5. Devtools 통합: Vue Devtools와 잘 통합되어 스토어 상태를 실시간으로 확인하고 디버깅할 수 있습니다.
6. 플러그인 확장성: 필요에 따라 플러그인을 추가해 기능을 확장할 수 있습니다.

---

설치

피니아를 프로젝트에 추가하려면 다음 명령어를 사용합니다:

npm install pinia

Vue 애플리케이션에 피니아를 등록합니다:

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

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);
app.mount('#app');

---

기본 사용법

피니아는 defineStore 함수를 사용해 스토어를 정의합니다. 스토어는 상태(state), 동작(actions), 게터(getters)로 구성됩니다.

예제: 카운터 스토어

// stores/counter.js
import { defineStore } from 'pinia';

// 'counter'라는 이름의 스토어 정의
export const useCounterStore = defineStore('counter', {
  // 상태 정의
  state: () => ({
    count: 0
  }),
  // 동작 정의
  actions: {
    increment() {
      this.count++; // 상태 변경
    },
    decrement() {
      this.count--;
    }
  },
  // 계산된 값 정의
  getters: {
    doubleCount(state) {
      return state.count * 2; // 상태를 기반으로 계산
    }
  }
});

컴포넌트에서 사용

// MyComponent.vue
<template>
  <div>
    <p>Count: </p>
    <p>Double Count: </p>
    <button @click="counter.increment">증가</button>
    <button @click="counter.decrement">감소</button>
  </div>
</template>

<script>
import { useCounterStore } from '@/stores/counter';

export default {
  setup() {
    const counter = useCounterStore(); // 스토어 가져오기
    return { counter };
  }
};
</script>

---

주요 구성 요소

1. state:
   • 스토어의 상태를 정의하는 함수입니다.
   • 반응형 객체로 반환되며, ref나 reactive를 사용할 필요 없습니다.
   • 예: state: () => ({ count: 0 })
2. actions:
   • 상태를 변경하는 메서드입니다.
   • 비동기 작업(async/await)도 쉽게 처리할 수 있습니다.
   • 예: async fetchData() { this.data = await apiCall(); }
3. getters:
   • 상태를 기반으로 계산된 값을 반환합니다.
   • Vue의 computed처럼 동작하며 캐싱됩니다.
   • 예: doubleCount: (state) => state.count * 2

---

고급 사용법

1. 비동기 액션

export const useUserStore = defineStore('user', {
  state: () => ({ userData: null }),
  actions: {
    async fetchUser() {
      const response = await fetch('/api/user');
      this.userData = await response.json();
    }
  }
});

2. 스토어 간 참조

import { useCounterStore } from './counter';

export const useOtherStore = defineStore('other', {
  state: () => ({ extra: 10 }),
  getters: {
    combinedCount() {
      const counter = useCounterStore();
      return counter.count + this.extra;
    }
  }
});

3. 상태 초기화

$reset으로 상태를 초기화할 수 있습니다:

const counter = useCounterStore();
counter.$reset(); // count가 0으로 돌아감

---

장점

• 간결함: Vuex보다 설정이 간단하고 중첩된 구조가 필요 없습니다.
• 유연성: 컴포지션 API와 잘 맞아 자유로운 사용이 가능합니다.
• 성능: 필요한 스토어만 로드되며, 불필요한 오버헤드가 적습니다.

---

언제 사용하면 좋을까?

• 전역 상태 관리: 여러 컴포넌트에서 공유해야 하는 데이터가 있을 때.
• 복잡한 애플리케이션: 상태 관리가 복잡해질 때 구조적으로 관리하고 싶을 때.
• Vue 3 프로젝트: Vue 3와의 완벽한 호환성을 원할 때.

피니아는 현대적인 Vue 개발에서 상태 관리를 위한 표준으로 자리 잡았으며, 직관적이고 강력한 기능을 제공합니다. 추가 질문이 있으면 언제든 말씀해주세요!