📗 탬플릿 생성후 readme 읽어보기
Vue 3 + Vite
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3
<script setup>SFCs, check out the script setup docs to learn more.Recommended IDE Setup
VS Code + Vue - Official (previously Volar) and disable Vetur
에서 스크립트 셋업 문서를 확인해보자.
[script setup] https://vuejs.org/api/sfc-script-setup.html#sfc-script-setup
뷰알못... 뭔가 이슈가 있나해서 읽어보니
script setup은 SFC(Single-File Components) 내부의 Composition API를 사용하기 위한 컴파일 타임 구문이라한다.
아래와 같이 setup을 작성해서 쓴다.
<script setup>
console.log('hello script setup')
</script>하지만 Vue 3.2 버전부터 script setup 내에서 사용되는 Vue API는 자동으로 import된다고 한다.(오옹)
💛 Composition API
Composition API
Vue 3에서 도입된 새로운 기능으로, 컴포넌트의 로직을 더 유연하게 구성할 수 있게 해주는 함수 기반의 API이다!
- 데이터의 변화를 효율적으로 관리하거나
- 컴포넌트의 생성 및 소멸 시점에 특정 로직을 실행하거나
- 반응형 API를 사용하는 동안 Vue의 의존성 주입 시스템을 활용하여 컴포넌트 간의 데이터 및 함수 전달을 용이하게 한다.
[참고 링크] https://vuejs.org/api/composition-api-setup.html
[참고 링크] https://heewon26.tistory.com/258
ref는 컴포넌트의 상태를 관리한다는 점에서 useState같은걸까 싶었는데
.value속성을 통해 접근해야하는 점,- Vue의 반응형 시스템을 사용하여 단일 값의 반응형 참조를 생성하는 점
이 다르다고 한다.
그리고 배열과 객체등에는 ref()가 아니라 reactive()를 사용하길 권장한다.
🔍 Vue의 반응형 시스템이 뭔데...?
[참고 링크] https://ko.vuejs.org/guide/essentials/reactivity-fundamentals
Vue에서의 반응형 상태
: 데이터의 변화를 자동으로 감지하고, 이에 따라 UI를 업데이트하는 Vue의 핵심 기능이다.
그리고 Composition API에서는 setup() 함수 내에서 반응형 상태를 선언하고 반환하는데 이 함수는 컴포넌트의 초기 상태를 설정하는 데 사용되며, 여기서 선언된 모든 반응형 상태는 템플릿에서 직접 사용할 수 있다고 한다.
근데 위에서 3.2버전부터 setup은 자동으로 Import된다고 하니 별도 설정 없이<script>내에 작성하면 될것이다.(아직 안해봐서 아닐수도 있음 :3)
[참고 링크] https://ko.vuejs.org/guide/typescript/composition-api.html#typing-ref
import { ref, reactive } from 'vue'
import type { Ref } from 'vue'
const year: Ref<string | number> = ref('2020')
year.value = 2020 // 정상적인 동작!
interface Book {
title: string
year?: number
}
const book: Book = reactive({ title: 'Vue 3 Guide' })위 코드는 ref(), reactive()의 타입 설정 예시인데
원시값을 기준으로 타입을 추정한다하니 react+ts에서 하던대로 해주면 되겠다.
💚 emit
자식 컴포넌트에서 부모 컴포넌트로 이벤트를 전달하는 데 사용한다.
=> 자식 컴포넌트는 특정 이벤트가 발생했음을 부모 컴포넌트에 알릴 수 있음!
setup 함수 내에서 context.emit을 호출하여 이벤트를 발생시킴
📝 emit 예시 코드!
1) 부모 컴포넌트
: setup 함수(컴포넌트의 초기 상태를 설정하고, 반응형 데이터, 계산된 속성, 메서드 등을 정의)를 사용하여 count라는 반응형 상태와 increaseCount, handleIncrement라는 메서드를 정의함
2) 자식 컴포넌트
: onIncrement이라는 이벤트를 발생시키는 예시이다.
<template>
<button @click="increaseCount">Increase Count</button>
<ChildComponent :count="count" @onIncrement="handleIncrement" />
</template>
<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
setup() {
const count = ref(0);
const increaseCount = () => {
count.value++;
};
const handleIncrement = () => {
console.log('Count incremented in parent component');
};
return {
count,
increaseCount,
handleIncrement,
};
},
};
</script>
🗒️ script setup에서 default 사용하기
[참고 링크] https://ko.vuejs.org/api/sfc-script-setup
script setup은 Composition API를 사용하는 싱글 파일 컴포넌트(SFC) 내에서 더 간결하고 읽기 쉬운 코드를 작성하기 위한 컴파일 타임 문법임
근데 원래 사용하던 export default {}를 쓸 수 없다.
// 오류오류
A module cannot have multiple default exports.ts(2528)
(property) default: {}기존의 <script> 태그 내에서 export default를 사용하는 방식과는 다르다고 한다.
=> defineExpose, defineProps, defineEmits 등을 사용하면 된다함
<script setup lang="ts">
defineExpose({
// 외부에서 접근 가능한 속성 및 메소드 정의
})
</script>
Composition API 사용시
<script setup lang="ts">
const props = defineProps({
// props 정의
});
</script>
