목차
· 시작하며
· pinia와 vuex의 차이점
· pinia와 vuex의 실제 사용 사례
시작하며
pinia와 vuex는 vue에서 상태 관리를 위해 사용되는 라이브러리예요, vuex는 vue의 공식 상태 관리 라이브러리로 오랫동안 사용되어져 왔지만, vue3 도입 이후 pinia가 새롭게 등장하면서 많은 개발자들이 pinia를 선호하게 되었어요. vuex에서 pinia로 전환하게 된 주요 이유는 아래와 같아요.
· 간결한 API : 더 간결하고, 직관적인 API를 제공해요. 이를 통해 개발자는 상태 관리를 더 쉽게 이해하고 사용할 수 있어요.
· 타입스크립트 지원 : 타입스크립트를 더 잘 지원해요. 타입 안정성을 높여주고, 타입스크립트를 사용하는 개발자들에게 더 좋은 경험을 제공할 수 있어요.
· 성능 : 성능 최적화가 잘 되어있어 더 빠른 상태 관리를 제공해줘요.
· 호환성 : composition api의 vue3와 더 잘 호환될 수 있도록 설계가 되었어요.
pinia는 vue3의 공식 상태 관리 라이브러리로 자리 잡았어요. vuex도 여전히 사용 가능하지만, vue3와의 호환성 및 더 나은 개발 경험을 위해서 pinia가 권장이 되어요. vuex는 pinia가 기존의 vuex와 동일한 역할을 하고, 더 이상 새로운 기능이 추가되지 않는 유지보수 모드에 들어갔어요. 그래서 새로운 vue 기반 애플리케이션을 만들 때는 pinia를 사용하는 것이 더욱 권장된다고 해요.
pinia와 vuex의 차이점
API 및 사용 방식
pinia는 composition api 스타일과 options api 스타일을 모두 지원하고, vue3에서 가볍고 직관적인 문법을 지원해요.
vuex는 vue2부터 이어져 왔던 공식 상태 관리 라이브러리로, actions · mutations · getters 등의 구조가 조금 더 엄격하게 규정되어있어요.
타입스크립트 지원
vuex는 타입스크립트를 지원하지만, pinia에 비해 설정이 다소 번거롭고 보일러 플레이트가 많을 수 있다는 특징을 가지고 있어요.
러닝 커브 및 문법 간소화
pinia는 store 생성 시에 state, getters, actions 등을 작성할 때 훨씬 적은 보일러 플레이트 코드로 구성을 할 수 있어요.
vuex는 오래 공식 라이브러리로 사용이 되었을 만큼 공식 문서와 관련 예제가 풍부하지만, modules · namspaces · mutations · actions 등 구조가 많아 처음 배우기에 부담이 될 수 있어요.
vue devtools 및 플러그인
pinia는 vue devtools (특히 vue3 버전)와 연동되며, 별도의 설정 없이 디버깅과 타임 브래블 유지 기능 등을 지원해요.
vuex 역시 devtools를 지원하지만, vue3 환경에서는 pinia가 공식적으로 권장되기 때문에 향후 업데이트 측면에서 vuex는 유지보수 모드로 전환이 된 상태예요.
SSR 및 대규모 프로젝트
pinia는 ssr을 고려하여 설계가 되었고, vue3와 함께 사용할 때 더 간단한 ssr을 설정할 수 있어요.
vuex도 ssr 환경 구축이 가능하나, vue3 기반으로 새로운 프로젝트를 개설한다면 pinia를 사용하는 것이 권장된다고 해요.
pinia와 vuex의 실제 사용 사례
pinia의 경우 composition api 형태로 사용이 가능하고, 각 속성 (state, computed, actions 등)을 유연하게 구성할 수 있어요. 더불어 store를 쉽게 확장하고, 타입스크립트를 적용할 때 intellisence가 잘 작동해요.
// store-pinia.ts
import { desineStore } from 'pinia';
import { ref, computed } from 'vue';
export const useCounterStore = defineStore('counter', () => {
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
function increment() {
count.value++;
};
return { count, doubleCount, increment };
});vuex의 경우 기존부터 유지되어 온 구조로, vue2 버전부터 사용해왔거나 팀 내 문서화가 잘 되어있는 구조라면 유지보수 비용이 덜 들 수 있어요. 공식 상태 관리 라이브러리 역할을 하면서도, 이미 vue3를 고려하여 pinia로 마이그레이션 하는 사례가 늘고있어요.
// store-vuex.ts
import { createStore } from 'vuex';
export default createStore({
state() {
return {
count: 0
}
},
getters: {
doubleCount(state) {
return state.count * 2
}
},
mutations: {
increment(state) {
state.count++
}
},
actions: {
increment({ commit }) {
commit('increment');
}
}
});신규 기능에 대해서는 pinia를 기반으로 업데이트가 되고 있기에 vue3를 새로 사용하거나, 타입스크립트 도입이 활발한 팀의 경우 pinia를 선택하는 것을 권장해요. vuex가 이미 적용되어있고, 큰 문제가 없다면 유지 및 점진적 마이그레이션의 대안으로 pinia를 고려할 수도 있을 것 같다는 생각이 드네요 👀
댓글