[Vue] Pinia (State Manager)

 

Vue에서 State Manager란 무엇인가?

State Manager는 애플리케이션의 상태(state)를 중앙에서 관리하고, 이를 효율적으로 업데이트하거나 공유할 수 있도록 도와주는 도구입니다. Vue와 같은 프런트엔드 프레임워크에서 상태 관리는 컴포넌트 간 데이터 흐름을 명확하게 하고, 복잡한 데이터 구조를 보다 쉽게 다룰 수 있도록 해줍니다.

State Manager의 필요성

Vue는 기본적으로 컴포넌트 간 데이터 흐름을 위해 props와 emit을 사용합니다. 하지만 애플리케이션 규모가 커질수록 아래와 같은 문제들이 발생할 수 있습니다:

1. 컴포넌트 간 데이터 전달의 복잡성: 부모-자식 관계가 깊어질수록 데이터 전달이 번거로워집니다.
2. 형제 컴포넌트 간 데이터 공유의 어려움: 상태를 공유하려면 부모 컴포넌트를 경유해야 하는 경우가 많아집니다.
3. 상태의 일관성 유지: 여러 컴포넌트에서 같은 상태를 수정하다 보면 데이터 불일치 문제가 발생할 수 있습니다.

이러한 문제를 해결하기 위해 Vuex와 같은 상태 관리 라이브러리가 등장했으며, 최근에는 Pinia가 더욱 간단하고 직관적인 API로 주목받고 있습니다.

Pinia란 무엇인가?

Pinia는 Vue 3를 위해 설계된 차세대 상태 관리 라이브러리입니다. Vuex의 대안으로, 사용이 간단하고 Vue 3의 Composition API와 완벽하게 통합됩니다. Pinia는 다음과 같은 장점을 제공합니다:

1. 간단한 문법: boilerplate가 적고 설정이 쉽습니다.
2. Typescript 친화적: 강력한 타입 지원을 제공합니다.
3. Devtools 통합: Vue Devtools와 자연스럽게 연동됩니다.
4. 모듈화된 설계: 스토어를 모듈 단위로 나눌 수 있어 확장성이 높습니다.

Pinia 설치 및 설정

1. Pinia 설치

npm install pinia

2. Pinia 설정

먼저, Vue 애플리케이션에 Pinia를 설정해야 합니다. main.js 또는 main.ts 파일에서 Pinia를 생성하고 Vue 애플리케이션에 추가합니다:

// main.js 또는 main.ts
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');

3. 스토어 생성

Pinia에서 상태 관리를 위해 스토어를 정의합니다. 예를 들어, 카운터 애플리케이션을 위한 counter 스토어를 생성한다고 가정해보겠습니다:

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

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

4. 스토어 사용

스토어를 사용하는 방법은 아래와 같습니다:

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

const counterStore = useCounterStore();
</script>

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

Pinia의 주요 기능

1. State: 컴포넌트 간 공유되는 데이터.
2. Getters: 계산된 상태를 정의.
3. Actions: 상태를 변경하는 메서드.

결론

Pinia는 Vue 3 애플리케이션에서 상태 관리를 간소화하고, 더 나은 개발 경험을 제공합니다. 간단한 API, Vue Devtools와의 통합, 그리고 Typescript 지원 덕분에 Pinia는 현대 Vue 애플리케이션의 이상적인 선택입니다. 이제 Pinia를 사용하여 더 깔끔하고 유지보수하기 쉬운 코드를 작성해보세요!