[Vue.js] Vuex를 대체할 Pinia에 대해 알아보자.

1. Pinia란 무엇인가요?

Pinia는 Vue.js 애플리케이션에서 상태 관리를 위한 상태 관리 라이브러리입니다. Vuex와 같은 다른 Vue.js 상태 관리 도구와 달리 Pinia는 TypeScript에서 제공하는 제네릭을 사용하며, Vuex보다 더 가볍고 직관적인 API를 제공합니다.

 

2. Pinia를 사용하는 이유는 무엇인가요?

• Vuex와 같은 다른 상태 관리 도구보다 더 가볍고 직관적인 API를 제공합니다.
• Vuex와 같은 다른 상태 관리 도구와 달리 TypeScript에서 제공하는 제네릭을 사용하여 안정성과 유지 보수성을 높입니다.
• Vuex보다 더 작은 번들 크기를 가지므로 애플리케이션 성능을 향상시킵니다.
• 핫 모듈 리로딩(HMR)을 지원합니다.

핫 모듈 리로딩(HMR)이란?

 

핫 모듈 리로딩(HMR)은 소스 코드를 수정하고 저장할 때 애플리케이션을 다시 로드하지 않고 변경 사항을 적용하는 기능입니다. 이 기능은 개발자들이 애플리케이션을 더 빠르게 개발하고 디버그할 수 있도록 도와줍니다.

보통, 변경된 소스 코드를 적용하려면 애플리케이션을 다시 로드해야 합니다. 이렇게 하면 변경 사항이 적용되지만, 로딩 시간이 추가되며 상태도 초기화됩니다. 하지만 HMR을 사용하면 소스 코드의 변경 사항만 적용하고 애플리케이션의 상태를 유지할 수 있습니다.

HMR은 웹팩(Webpack)과 같은 모듈 번들러에서 제공되는 기능입니다. 번들러는 변경된 모듈을 감지하고 이전 상태와 비교하여 변경 사항을 식별합니다. 그런 다음, 변경 사항이 있는 모듈만 다시 빌드하여 애플리케이션을 다시 로드하지 않고도 변경 사항을 적용할 수 있습니다.

Vue.js에서 Pinia와 같은 상태 관리 라이브러리는 HMR을 지원하여 애플리케이션을 빠르게 개발하고 디버그할 수 있도록 도와줍니다. 이렇게 하면 애플리케이션의 상태를 유지하면서 변경된 소스 코드를 빠르게 반영할 수 있습니다.

3. 소스코드

먼저, 커맨드창에 'npm install pinia' 를 입력하여 pinia 라이브러리를 설치합니다.

 

그리고 TodoStore.js 를 만들어줍니다.

import { defineStore } from 'pinia';

export const useTodoStore = defineStore({
  id: 'todo',
  state: () => ({
    todos: [] as { text: string; done: boolean }[],
  }),
  actions: {
    add(text: string) {
      this.todos.push({ text, done: false });
    },
    remove(index: number) {
      this.todos.splice(index, 1);
    },
    toggle(index: number) {
      this.todos[index].done = !this.todos[index].done;
    },
  },
});

위 코드에서 defineStore 함수는 상태를 정의하는 데 사용되며, id는 Pinia 스토어의 고유 식별자입니다. state 객체는 스토어의 상태를 나타내며, actions 객체는 스토어의 동작을 정의합니다.

 

그런 다음, TodoList 컴포넌트를 만들어 TodoStore를 사용합니다.

<template>
  <div>
    <input v-model="text" />
    <button @click="addTodo">Add</button>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <input type="checkbox" :checked="todo.done" @change="toggle(index)" />
        <span :class="{ 'line-through': todo.done }">{{ todo.text }}</span>
        <button @click="remove(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useTodoStore } from 'store/TodoStore';