[Vue3] Composition API 사용법 2

gminnimk·2025년 3월 22일

Vue3

목록 보기

35/39

Vue3에서는 Composition API를 사용하여 코드의 가독성과 재사용성을 높일 수 있습니다.

데이터 선언, props 사용법, watch/ computed/ methods 사용법과 Pinia를 이용한 상태 관리에 대해 알아봅니다.

1️⃣ 데이터 생성: ref vs reactive

ref
- 주로 숫자, 문자열 등 primitive 타입 데이터를 저장
- 내부 값은 .value로 접근
reactive
- object, array 등 reference 타입 데이터를 저장
- .value 없이 객체처럼 직접 사용 가능

ref를 쓰든 reactive를 쓰든 똑같은 역할을 하는데

reactive는 object, array 같은 reference data type을 주로 담고

ref는 숫자, 문자같은 primitive data type을 담게 되어있습니다.

근데 실은 구분해서 쓰기 귀찮아서 전부 ref 씁니다.

ref라는 함수 까보면 "그냥 reactive 해주세요~" 그거밖에 없습니다 둘다 똑같은 함수입니다.

예제

<script setup>
import { ref, reactive } from 'vue';

// primitive 타입은 ref 사용
const follower = ref([]);

// object 타입은 reactive 사용
const test = reactive({ name: 'kim' });
</script>

2️⃣ Props 사용법

Composition API의 <script setup>에서는 defineProps()를 사용하여 props를 선언합니다.

props는 기본적으로 reactive하지만, 내부 속성을 개별적으로 반응형으로 사용하고 싶다면 toRefs()를 활용합니다.

예제

<script setup>
import { toRefs } from 'vue';

// props 선언 (컴포넌트 외부로부터 전달받을 값)
const props = defineProps({
  someProp: { type: String, required: true }
  // required는 필수로 받을 것인지에 대한 속성
});

// 개별 속성을 반응형(ref)으로 다루기 위해 toRefs 사용
const { someProp } = toRefs(props);

// someProp.value 로 접근 (템플릿 내에서는 바로 사용 가능)
console.log(someProp.value);
</script>

주의: props는 자식 컴포넌트에서 수정하면 안됩니다.

3️⃣ watch 사용법

데이터나 props의 변화를 감지하고 싶을 때 watch()를 사용합니다.

예제

<script setup>
import { ref, watch } from 'vue';

const follower = ref([]);

// follower 값이 변경되면 실행할 콜백 함수
watch(follower, (newVal, oldVal) => {
  console.log('follower changed from', oldVal, 'to', newVal);
});
</script>

4️⃣ computed 사용법

computed()는 의존하는 데이터의 변화를 감지하여 연산 결과를 캐싱합니다.

예제

<script setup>
import { ref, computed } from 'vue';

const follower = ref([]);

// follower 배열의 길이를 실시간으로 계산
const followerCount = computed(() => follower.value.length);

console.log(followerCount.value);
</script>

참고: computed 값은 .value로 접근해야 합니다.

5️⃣ Methods 사용법

Composition API에서는 함수를 단순히 선언하고, return 객체에 포함하면 템플릿에서 methods처럼 사용할 수 있습니다.

예제

<script setup>
import { ref } from 'vue';

const follower = ref([]);

function hello() {
  console.log('Hello, Vue3 Composition API!');
}

// 템플릿에서는 hello() 함수를 바로 사용할 수 있음
</script>

6️⃣ 상태 관리: Pinia 사용법

Vue3에서는 기존 Vuex 대신 Pinia를 사용하는 것이 최신 표준입니다.

Pinia는 가볍고 사용하기 편리한 상태 관리 라이브러리입니다.

예제

Pinia 스토어 생성 (예: src/stores/myStore.js)

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

export const useMyStore = defineStore('myStore', {
  state: () => ({
    name: 'VueUser'
  }),
  actions: {
    updateName(newName) {
      this.name = newName;
    }
  }
});

컴포넌트에서 스토어 사용하기

<script setup>
import { ref } from 'vue';
import { useMyStore } from '@/stores/myStore';

// Pinia 스토어 불러오기
const store = useMyStore();

// store.state와 동일하게, store의 속성에 바로 접근
console.log(store.name);

// 예를 들어, follower 데이터 선언
const follower = ref([]);

// 필요 시 store의 액션 호출
function changeName() {
  store.updateName('NewName');
}
</script>