Vue.js) 컴포지션API - 반응형 데이터

1. 컴포지션 API

Vue.js에서 컴포지션 API(Composition API)는 Vue3에서 도입되었으며, 복잡한 로직을 보다 모듈화 하고 재사용 가능하게 만드는 데 도움이 됩니다. 컴포지션 API는 주로 setup 함수를 통해 사용됩니다.

• setup
  
  • setup 함수는 Vue 컴포넌트의 초기 단계에서 호출되며, props와 context를 인자로 받을 수 있습니다. 내부에서 반응형 상태, 라이프 사이클 훅 등을 정의할 수 있습니다.
• 반응형 상태
  • ref: 단일 값의 반응형 상태를 생성합니다.
  • reactive: 객체의 반응형 상태를 생성합니다.
• computed
  • computed 함수를 사용하여 종속성에 따라 자동으로 업데이트 되는 계산된 속성을 정의합니다.
• watch
  
  • watch 함수를 사용하여 특정 데이터의 변화를 감지하고 부수 효과를 실행할 수 있습니다.

2. 컴포지션API로 변환하기

<template>
	<div @click="increase">{{ count }}</div>
</template>

<script>
export default {
	data() {
		return {
			count: 0,
		};
	},
	methods: {
		increase() {
			this.count += 1;
		},
	},
};
</script>

div를 클릭하면 increase 메서드에 의해 count가 1씩 증가하는 코드입니다. 이를 컴포지션 API로 변환하겠습니다.

<template>
	<div @click="increase">{{ count }}</div>
</template>

<script>
export default {
	setup() {
		let count = 0;
		function increase() {
			count += 1;
		}

		return {
			count,
			increase,
		};
	},
};
</script>

setup 내부에 count와 increase를 정의해주고 return 합니다. 하지만 이 상태에서 div를 클릭하여도 count는 반응성을 가지지 않습니다. 반응성을 가지기 위해선 Vue에서 Ref를 사용해야 합니다. 다음은 수정한 코드입니다.

<template>
	<div @click="increase">{{ count }}</div>
</template>

<script>
import {ref} from 'vue';
export default {
	setup() {
		let count = ref(0);
		function increase() {
			count.value += 1;
		}

		return {
			count,
			increase,
		};
	},
};
</script>

 ref를 사용하여 count란 데이터가 반응성을 가지도록 할 수 있습니다. ref(["초기값"]) 형태로 사용할 수 있습니다. 여기서 주의해야할 점은 count는 ref() 객체 이기 때문에 increase 내부 로직에 count.value += 1로 count의 value에 대해 연산을 해주어야 합니다.