Pinia: Vue 3의 상태 관리 라이브러리

Pinia는 Vuex의 대체로 많이 사용되는 Vue 3의 새로운 상태 관리 라이브러리입니다. 더 간단하고 강력한 기능을 제공하여 Vue.js 개발자들 사이에서 인기를 얻고 있습니다. 이 글에서는 Pinia의 주요 특징과 기본 사용법을 살펴보고, Vuex와 비교하여 Vue.js 프로젝트에서 Pinia를 사용하는 방법을 예제로 보여드리겠습니다.

Pinia란 무엇인가?

Pinia는 Vue 3용 상태 관리 라이브러리로, Vuex의 대체로 사용됩니다. 다음과 같은 주요 특징을 제공합니다:

1. 간결함: API가 간단하고 직관적입니다.
2. 타입스크립트 지원: 기본적으로 타입스크립트를 완벽히 지원합니다.
3. 모듈화: 모듈을 쉽게 생성하고 관리할 수 있습니다.
4. Vue Devtools 통합: Vue Devtools를 통해 상태를 쉽게 디버깅할 수 있습니다.

Pinia 설치 및 설정

먼저, Pinia를 설치해야 합니다.

npm install pinia

이제 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');

Pinia 기본 사용법

Pinia의 기본 사용법을 살펴보겠습니다. Store를 생성하고 상태(state), 게터(getters), 액션(actions)을 정의하는 방법을 알아봅니다.

store/counter.js

먼저, store 디렉토리를 생성하고, 그 안에 counter.js 파일을 만듭니다. 각 상태 관리를 파일 단위로 분리하여 작성하는 것이 일반적입니다.

import { defineStore } from 'pinia';

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

App.vue

이제 Pinia 스토어를 사용하는 컴포넌트를 작성해보겠습니다.

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { useCounterStore } from './store/counter';
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const counterStore = useCounterStore();

    return {
      count: counterStore.count,
      doubleCount: counterStore.doubleCount,
      increment: counterStore.increment
    };
  }
});
</script>

<style scoped>
/* 스타일 정의 */
</style>

Vuex와 Pinia 비교

앞서 작성한 Pinia 예제와 Vuex 4 예제를 비교해보겠습니다.

Vuex 4 예제

먼저, Vuex 4를 사용한 예제를 살펴보겠습니다.

Vuex 설치

npm install vuex@next

store/index.js

Vuex 4에서는 createStore 함수를 사용하여 스토어를 생성합니다.

import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});

export default store;

main.js

Vuex 4를 Vue 3 애플리케이션에 설정합니다.

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);

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

App.vue

Vuex 4 스토어를 사용하는 컴포넌트를 작성해보겠습니다.

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapActions(['increment'])
  }
};
</script>

<style scoped>
/* 스타일 정의 */
</style>

Pinia 예제

앞서 작성한 Pinia 예제를 다시 살펴보겠습니다.

store/counter.js

import { defineStore } from 'pinia';

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

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');

App.vue

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { useCounterStore } from './store/counter';
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const counterStore = useCounterStore();

    return {
      count: counterStore.count,
      doubleCount: counterStore.doubleCount,
      increment: counterStore.increment
    };
  }
});
</script>

<style scoped>
/* 스타일 정의 */
</style>

주요 차이점

API의 간결함

• Vuex 4: Vuex 4는 Vue 3와 호환되는 최신 버전으로, 기본적인 사용법은 이전 버전과 유사하지만, 설정과 사용이 다소 복잡할 수 있습니다.
• Pinia: Pinia는 훨씬 간결한 API를 제공하여 설정과 사용이 더 쉽고 직관적입니다.

모듈화

• Vuex 4: Vuex에서 모듈을 관리하는 것은 다소 복잡할 수 있습니다.
• Pinia: Pinia는 모듈을 쉽게 생성하고 관리할 수 있는 간단한 방식을 제공합니다.

타입스크립트 지원

• Vuex 4: Vuex는 타입스크립트를 지원하지만, 설정과 사용이 번거로울 수 있습니다.
• Pinia: Pinia는 타입스크립트를 기본적으로 지원하며, 더 나은 개발자 경험을 제공합니다.

Devtools 통합

• Vuex 4: Vuex는 Vue Devtools와 통합되지만, 설정이 필요할 수 있습니다.
• Pinia: Pinia는 Vue Devtools와 기본적으로 통합되어 있어 상태를 쉽게 디버깅할 수 있습니다.

Composition API 사용

• Vuex 4: Vuex는 Options API와 Composition API 모두에서 사용할 수 있습니다.
• Pinia: Pinia는 Composition API를 주로 사용하지만, Options API에서도 사용할 수 있습니다.

결론

Pinia는 Vue 3 애플리케이션을 위한 강력한 상태 관리 라이브러리입니다. 간단하고 직관적인 API, 타입스크립트 지원, 모듈화 기능, 그리고 Vue Devtools 통합 등을 통해 개발자 경험을 크게 향상시킵니다. Vuex를 사용해왔던 개발자들에게 Pinia는 훌륭한 대안이 될 수 있습니다.