8. Pinia에서의 Composition API 스타일과 Options API 스타일

Pinia에서의 Composition API 스타일과 Options API 스타일

Pinia에서는 Composition API 스타일과 Options API 스타일
두 가지 방법으로 store를 정의할 수 있습니다.
각 스타일의 차이점과 사용 방법을 정리해보겠습니다.

 

1. Vue가 뭐야? 
2. 프레임워크란?
3. Vue3 기본 문법
4. Vue Router (<router-link>, <router-view>)
5. Pinia (상태 관리 라이브러리)
6. Vue3 Composition API
7. Pinia Store에서 ref와 reactive를 사용하는 방법
8. Pinia에서의 Composition API 스타일과 Options API 스타일

1. Composition API 스타일

📌 Composition API 스타일은 setup() 함수 기반의 구조로 작성되며,
ref(), reactive(), computed() 등을 직접 사용할 수 있습니다.

✅ 특징

• defineStore() 내부에서 setup() 스타일을 사용.
• ref(), reactive(), computed(), watch() 등을 자유롭게 활용 가능.
• TypeScript 사용 시 더 명확하게 타입을 지정할 수 있음.
• 함수형 로직을 쉽게 재사용 가능.

✅ 사용 예시

// src/stores/counter.js
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0);

  const increment = () => {
    count.value++;
  };

  const decrement = () => {
    count.value--;
  };

  // 계산된 값 (computed)
  const doubleCount = computed(() => count.value * 2);

  return { count, increment, decrement, doubleCount };
});

✅ 컴포넌트에서 사용

<!-- src/components/Counter.vue -->
<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <p>Double Count: {{ counter.doubleCount }}</p>
    <button @click="counter.increment">+</button>
    <button @click="counter.decrement">-</button>
  </div>
</template>

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

const counter = useCounterStore();
</script>

🔹 Composition API 스타일의 장점

• setup() 내부에서 Vue의 Composition API(ref, reactive, computed, watch)를 직접 활용할 수 있음.
• 코드가 모듈화되어 관리하기 쉬움.
• TypeScript와의 궁합이 좋음.

2. Options API 스타일

📌 Options API 스타일은 state, getters, actions 등의 옵션을 사용하여 작성됩니다.

✅ 특징

• Vue 2에서 사용하던 방식과 유사한 구조.
• state, getters, actions을 명확하게 구분하여 관리.
• Vue 2의 Options API 스타일을 선호하는 경우 적합.

✅ 사용 예시

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

export const useCounterStore = defineStore('counter', {
  // state: 반응형 데이터
  state: () => ({
    count: 0,
  }),

  // getters: 계산된 값 (computed)
  getters: {
    doubleCount: (state) => state.count * 2,
  },

  // actions: 메서드 (mutations + actions 개념 포함)
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
});

✅ 컴포넌트에서 사용

<!-- src/components/Counter.vue -->
<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <p>Double Count: {{ counter.doubleCount }}</p>
    <button @click="counter.increment">+</button>
    <button @click="counter.decrement">-</button>
  </div>
</template>

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

const counter = useCounterStore();
</script>

🔹 Options API 스타일의 장점

• 기존 Vue 2의 Options API 스타일을 유지할 수 있어, Vue 2에서 Vue 3로 전환하는 프로젝트에서 유용.
• state, getters, actions을 명확하게 구분하여 가독성이 좋음.
• 간단한 상태 관리를 할 때 적합.

3. Composition API 스타일 vs Options API 스타일 비교

Composition API 스타일Options API 스타일

설명	setup() 함수를 사용하여 상태 관리	state, getters, actions를 사용하여 상태 관리
반응형 데이터	ref(), reactive() 사용	state 내부에서 선언
계산된 값	computed() 사용	getters 사용
메서드 관리	일반 함수로 정의	actions 내부에서 정의
Vue 2 지원	❌ (Vue 3 전용)	✅ (Vue 2 스타일과 유사)
코드 재사용성	✅ 높은 유연성과 재사용성	🚫 코드 재사용이 제한적
TypeScript 지원	✅ 더 직관적이고 명확한 타입 지원	✅ TypeScript 사용 가능하지만 Composition API보다 자유롭지 않음

4. 어떤 스타일을 선택해야 할까?

✅ Composition API 스타일이 적합한 경우

• Vue 3을 처음부터 사용하는 프로젝트.
• ref(), reactive(), computed(), watch() 등 Composition API의 장점을 활용하고 싶은 경우.
• TypeScript와 함께 사용하려는 경우.
• 컴포넌트 간 로직을 재사용하고 싶은 경우.

✅ Options API 스타일이 적합한 경우

• 기존 Vue 2 프로젝트를 Vue 3으로 마이그레이션하는 경우.
• Vue 2 스타일의 state, getters, actions 방식이 익숙한 경우.
• 간단한 상태 관리가 필요한 경우.

5. 결론

• Vue 3과 Composition API를 적극적으로 활용하려면 Composition API 스타일을 추천합니다.
• 기존 Vue 2 스타일을 유지하면서 Vue 3으로 전환하려면 Options API 스타일을 선택할 수 있습니다.

Vue 3에서는 Composition API가 권장되는 방식이므로, 가능하면 Composition API 스타일을 사용하는 것이 좋습니다. 🚀

 

이전 : 7. Pinia Store에서 ref와 reactive를 사용하는 방법