1. Composition API를 사용하는 이유
프로젝트가 커지다 보면 어떠한 것을 수정하기 위해서 해당 항목을 찾을 때,
수십 가지의 Data 중에서 하나를 찾고, 이 Data가 어떤 methods에 영향을 받는지 또 수십 개의 methods 중에서 하나를 찾고, Computed에 포함이 되어 있지는 않는지 등 Ctrl + F 기능을 통해 여기저기 하나씩 검색하며 찾아야 하는 불편함이 생기게 되는데, 이럴 때 사용하기 좋은 것이 Composition API입니다. (기존의 사용 방법은 Options API라고 부릅니다)
※ 그냥 하나의 문법(사용방법)이라 보면 됩니다
2. Options API와 Composition API의 비교
아래는 동일한 내용을 기존 방식(Options API)으로 작성했을때와 Composition API로 작성했을 때의 차이점입니다.
Options API 예)
<template>
<div>
<p> {{ count }} * 2 = {{ dubble }} </p>
<button @click="countPlus">카운트 증가</button>
</div>
<div>
<p> {{ text }} </p>
<button @click="reverseText">글자 뒤집기</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 1,
text: "HELLO"
}
},
computed: {
dubble() {
return this.count * 2
}
},
methods: {
countPlus() {
this.count += 1
},
reverseText() {
this.text = this.text.split('').reverse().join('')
}
},
watch: {
count() {
console.log("숫자증가!")
}
}
}
</script>
Composition API로 변환한 예)
<template>
<div>
<p> {{ count }} * 2 = {{ dubble }} </p>
<button @click="countPlus">카운트 증가</button>
</div>
<div>
<p> {{ text }} </p>
<button @click="reverseText">글자 뒤집기</button>
</div>
</template>
<script>
import { ref } from '@vue/reactivity'
import { computed, onMounted, watch } from '@vue/runtime-core'
export default {
setup() {
const count = ref(1)
const dubble = computed(() => {
return count.value * 2 // computed는 return으로 this대신 .value 사용.
})
function countPlus() {
this.count += 1
}
watch(count, () => {
console.log("숫자증가!")
})
const text = ref('HELLO')
function reverseText() {
this.text = this.text.split('').reverse().join('')
}
onMounted(() => {
console.log(`마운트 될시점의 값 = ${text.value}.`) // <-- Life Cycle Hook
})
console.log("지금은 Created") // <-- 특별한거 없이 그냥 작성하면 created 위 onMounted 보다 먼저 실행됨
return {
count,
dubble,
countPlus,
text,
reverseText
}
}
}
</script>
3. 사용방법 관련 간략 설명
위 예문과 비교하면서 보면 이해하기 쉬울 것입니다.
(1) setup()
setup(){ }으로 시작해서 내부에 작성하면 되는데 setup 자체가 기본적으로 created 역할을 한다고 보면 됩니다.
(2) 데이터 만드는 방법
이제 Composition API를 사용하기 위해선 setup 내부에 코드를 작성하면 되는데
데이터를 만드는 방식은 let 작명 = ref(데이터값) 형식으로 작성합니다.
공식적으로는 숫자(Number)나 문자(String)는 ref(데이터값), 배열(Array)이나 객체(Object)는 reactive(데이터값)으로 작성하라고 권장하고 있긴 한데, 둘 다 기능이 같다 보니 대부분 그냥 ref(데이터값)으로 사용합니다.
(3) 데이터 수정하는 방법
Composition API에서 데이터를 수정하거나 접근할 때는 this.데이터가 아닌 데이터.value로 접근합니다.
(4) computed, watch 사용 방법
Computed는 computed (()=>{ return 결과 }) 형식으로,
Watch는 watch(감시할데이터명, ()=>{ 실행하고 싶은 코드 }) 형식으로 작성합니다. (위 예제 참고)
(5) import와 return
위에서 말한 ref나, computed, watch 등 모든 명령어는 import를 해야 사용할 수 있습니다.
위 예제에서는 자동완성이 된 형식인데, 직접 입력한다면 아래와 같이 작성하고 { } 안에 사용한 것들 넣어주면 됩니다.
// import { ref, computed, watch, onMounted } from 'vue'또한 선언한 변수와 함수들은 아래쪽 return 내부에 모두 작성해 줘야 사용할 수 있습니다.
return {
count,
dubble,
countPlus,
text,
reverseText
}
(6) Life Cycle Hook 사용 방법
라이프 사이클 관련 사용법이 조금 달라지는데
라이프사이클 훅에 접두사 "on"을 추가함으로써 컴포넌트의 라이프사이클 훅에 접근할 수 있습니다.
on라이프사이클이름(()=>{ 실행할 코드 })※ created는 따로 명시할 필요가 없습니다.
(7) props 사용 방법
Composition API에서 props를 사용할 땐 toRefs를 사용합니다.
(App.vue)
<template>
<Box :text="text" :number="number" />
</template>
<script>
...
data(){
return {
number: 1,
text: 'sampleText'
}
},
...
</ script>(Box.vue)
<script>
import { toRefs } from 'vue'; // <-- 추가
export default {
name: "BoxComponent",
props: {
text: String,
number: Number
},
setup(props) { // <-- 첫번째 인자로 props
const { text, number } = toRefs(props) // <-- { } 안에 가져올 props 이름
console.log(text.value) // <-- 접근은 ***.value
console.log(number.value)
},
}
</script>script 상단에 import 해주고,
setup의 첫 번째 인자로 props
{ } 안에 가져올 프롭스 이름 적어준 후, = toRefs(props)라고 작성해주면
프롭스명.value로 데이터 접근 가능합니다.
(8) vuex 사용 방법
vuex를 사용하고 싶을 땐 <sciprt> 상단에 useStore를 import
import { useStore } from 'vuex'
setup 내부에 store를 사용한다고 선언
let store = useStore();
이후 원하는 state는 store.state.스테이트명으로 접근
console.log(store.state.number)
mutation 요청을 할 때는 store.commit('요청명')
<button @click="$store.commit('plusNumber')">카운트 증가</button>
vuex 사용 예)
(store.js)
import { createStore } from 'vuex'
const store = createStore({
state() {
return {
number: 1,
text: 'HELLO'
}
},
mutations: {
plusNumber(state) {
state.number ++
}
}
})
export default store;(App.vue)
<template>
<div>
<p> {{ $store.state.number }} * 2 = {{ dubble }} </p>
<button @click="$store.commit('plusNumber')">카운트 증가</button>
</div>
</template>
<script>
import { computed } from 'vue'
import { useStore } from 'vuex' // <-- 추가
export default {
setup() {
let store = useStore(); // <-- 추가
console.log(store.state.number) <-- 원하는 state를 사용
const dubble = computed(() => {
return store.state.number * 2
})
return {
dubble,
}
}
}
</script>
새로 추가된 Composition API와 Options API 무엇을 배우고 사용해야 하는지 고민이 된다면...
두 가지 API를 함께 사용할 수 있는가?
Options API 컴포넌트에 setup()을 적는 것으로 Composition API를 사용할 수 있다.
Options API가 더 이상 사용되지 않게 되는 것은 아닌가?
그렇지 않다, Options API는 Vue에 필수적이며 많은 개발자들이 Vue를 좋아하는 이유이다.
Composition API의 많은 이점들은 대규모 프로젝트에서만 나타나며,
Options API는 작은 프로젝트에선 더욱 확실한 선택이라는 것을 알고 있다.