요약
- Composition API가 들어오면서 데이터 선언, 함수 선언, 상태 관리 등의 변화
- 컴포넌트 내에서 데이터, 함수, 상태를 호출하는 방식도 변화
- 없던 종류의 컴포넌트, 내부적인 성능 향상을 위한 변화
변화 요약
- Composition API (→ 기본적으로 영향을 미치는 변경점!)
- 템플릿 생성 방식의 변화
- data, method 작성 방식의 변화
- Lifecycle hook 호출의 변화
- computed 속성 사용 방법의 변화
- props와 this 바인딩의 분리
- emit과 this 바인딩의 분리
- Suspended Component
- Fragment
- Portal
- 내부적인 변화
- 그 외..
사전 지식
Composition API란?
컴포넌트 내 특정 기능의 코드를 유연하게 구성하여 사용할 수 있도록 Vue3 버전에 추가된 함수 기반의 API
배경
- Vue는 프로젝트 규모가 커질 수록 관리하기 힘들다는 단점이 있어 이를 보완하기 위해 생김
- 컴포넌트의 계층구조가 복잡할수록 코드에 대한 추적 및 관리의 어려움 등..
쓰윽-
- 얼핏 보면 리액트의 Hooks와 매우 유사한 느낌
- 목적에 맞는 코드를 모듈화하여 기존의 단점을 보완할 수 있으며 더 유연하고 안전한 확장 가능
- beforeCreate, created… → “setup”
목적 & 정리
- API라는 이름을 붙인 것처럼, 특정 기능을 갖는 함수를 정의하고 API처럼 사용할 수 있게 해주는 것
- 코드에 대한 재활용성을 높이고, 코드의 가독성을 높이기 위해 사용
템플릿 생성 방식의 변화
여러개의 루트 엘리먼트
- vue2의 템플릿은 하나의 루트 엘리먼트만 허용했지만, Vue3부터는 여러개의 루트 엘리먼트를 갖는 컴포넌트를 지원
- ⇒ 불필요한 감싸주기 용의 wrapper div가 없어도 될 것으로 보임!
- 하지만 언제나 그렇듯, 여러개의 루트 엘리먼트 사용을 권장하지는 않음! (BEM 하의 원활한 스타일링 고려)
<template>
<div class="input-label">
{{inputLabel}}
</div>
<input type="text"/>
</template>
템플릿에서의 호출 방식
- 기존에는 props나 method 등을 구분없이 이름만으로 호출할 수 있었는데, 이제는 문맥상으로 이들을 조금 분리하는 것이 가능해짐
- 이 호출 방식에 대한 변화는 사실 템플릿의 변화라기 보다는 props, data, method를 다루는 방식의 변화와 연관! 후에 나옵니다!!
<template>
<div>
<div class="input-label">
<!--{{inputLabel}}-->
{{state.inputLabe}}
</div>
<input type="text"/>
</div>
</template>
data, method 작성 방식의 변화
- 코드 측면에서의 가장 큰 변화!
- method 선언이 전부 setup이라는 메소드 안으로 편입
- 대부분의 도큐먼트에서 사용하는 기본적인 예시는 Options API 방식
// Vue2.x → props, data, methods가 같은 계층에 존재
export default {
props: {
title: String
},
data () {
return {
username: '',
password: ''
}
},
methods: {
login () {
// login method
}
}
}
// Vue 3.x
// → props와 setup이 같은 계층에 존재, data는 state로,
// method들은 각각의 기명함수로 작성되어 한번에 반환되도록 변화
export default {
props: {
title: String
},
setup () {
const state = reactive({
username: '',
password: ''
})
const login = () => {
// login method
}
return {
login,
state
}
}
}
- vue 3.x setup 이렇게도 적용해요! (script 사용, 개인적으로 더 선호)
// vue 3.x
<script setup lang="ts">
import { definedProps, reactive }
const props = defineProps<{
fiterKeys: string[];
}>();
const state = reactive(() => {
username: string;
password: string;
});
const login = () => {
// login method
}
</script>
state의 경우에도 그냥 선언이 아닌, vue reactive 사용
- vue reactive - 반응형, vue가 반응형 시스템을 유지하기 위해 사용하는 간단한 JS 객체
- getter / setter
- Vue 종속성 추적 및 변경 알림 수행 가능
- 사용자에게는 보이지 않지만, 개발자가 속성에 엑세스 하거나 수정할 때 사용
- (변환된 데이터 객체 기록 시 브라우저의 getter/setter 형식 처리 방식이 다르므로 vue-devtools 설치 권장)
- watcher
- 모든 컴포넌트 인스턴스는 해당 watcher 인스턴스가 있으며, 컴포넌트가 종속적으로 렌더링 되는 동안 수정된 모든 속성 기록
- 나중에 종속적인 setter가 트리거되면 watcher에게 알리고 컴포넌트가 다시 렌더링 되는 방식
- getter / setter
Lifecycle hook 호출의 변화
- data, method와 같은 hierarchy(계층)에서 선언 → setup 내부에서 선언
- 이때 state나 method들과는 달리 Lifecycle hook은 return할 필요가 없음
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue'
export default {
setup() {
onBeforeMount(() => {
// ...
})
onMounted(() => {
// ...
})
onBeforeUpdate(() => {
// ...
})
onUpdated(() => {
// ...
})
onBeforeUnmount(() => {
// ...
})
onUnmounted(() => {
// ...
})
onActivated(() => {
// ...
})
onDeactivated(() => {
// ...
})
onErrorCaptured(() => {
// ...
})
}
}
Computed 속성 사용의 변화
- computed 속성은 이제 별도 옵션이 아닌, state 선언문 내에 computed 속성에 대한 선언 문구를 추가하는 방식으로 변경됨
- 사용하는 것만 import해 사용하도록 하고자 하는 철학이 담김
- = computed나 lifecycle hook 등 다양한 옵션들을 함수 형태로 동작하도록 변경
// vue2
export default {
// ..
computed: {
lowerCaseUsername () {
return this.username.toLowerCase()
}
}
}
// vue3
import { reactive, computed } from 'vue'
export default {
props: {
title: String
},
setup () {
const state = reactive({
username: '',
password: '',
lowerCaseUsername: computed(() => state.username.toLowerCase())
})
// ...
}
레퍼런스
'Programming > Vue.js' 카테고리의 다른 글
가볍게 문법과 개념 훑기 (0) | 2022.04.08 |
---|