script setup
- 싱글 파일 컴포넌트(SRC : Single File Component) 내에서 Composition API를 사용하기 위한 Syntactic sugar.
SRC는 한 파일이 하나의 요소를 정의하는 방식인 Component입니다. 한 파일에 HTML, Style, Script가 모두 있는 HTML파일과 유사합니다.
Syntactic sugar란 프로그래밍 언어 내에서 코드를 더 쉽게 읽거나 표현하도록 설계된 구문입니다.
장점
- 더 적은 보일러플레이드( 변경 없이 계속재사용할 수 있는 코드)로 더 간결한 코드 작성
- 순수 Typescript를 사용하여 props를 선언하거나 이벤트를 선언하는 기능
- 더 나은 런타임 성능
- IDE에서 타입 추론 성능 향상
스크립트 안 코드는 컴포넌트 안 setup() 함수로 컴파일 됩니다. 하지만, setup 함수는 컴포넌트를 처음 가져올 때 한 번만 실행되지만
Ref
ref()를 사용해 반응형 상태를 정의합니다.
템플릿에서는 ref() 의 변수명을 그대로 사용하면 자동적으로 ref 안 value 값을 가져옵니다.
<template>
<!-- value를 호출하지 않아도 자동으로 값이 나타남 -->
{{test}}
</template>
<script setup>
import { ref } from 'vue';
const test = ref('');
onMounted(() => {
test.value == '테스트';
})
</script>Template Ref
DOM 접근을 위해 html 태그에 직접 접근해야 한다면, html 태그 속성으로 ref와 이름을 지정한 다음, script에서 지정한 이름과 동일한 변수명으로 ref()를 선언하면 태그에 직접 접근할 수 있습니다.
<template>
<div class="test" ref="test"></div>
</template>
<script>
import { ref } from 'vue';
// ref의 초기값이 어떻든 이름만 같으면 태그 요소를 가져온다.
const test = ref(null);
test.style.color = '#333333';
</script>커스텀 컴포넌트 사용
커스텀 컴포넌트는 import 하여 사용할 수 있습니다.
PascalCase로 컴포넌트를 불러올 수도 있고, kebab-case로도 컴포넌트를 호출할 수 있습니다. (vue3에서는 통일성을 위해 PascalCase를 권장합니다.)
<template>
<!-- PascalCase (선언명과 통일성을 위해 권장) -->
<MyComponent />
<!-- kebab-case -->
<my-component>
</template>
<script setup>
import MyComponent from './MyComponent.vue;
</script>defineProps()
부모 컴포넌트에서 전달받은 props는 defineProps()를 호출하여 가져올 수 있습니다. 이때, 템플릿 안에서는 props를 선언하지 않고 변수명으로 바로 값을 얻을 수 있지만, script 태그 안에서는 props 안에서 변수명을 호출해야 값을 얻을 수 있습니다.
TypeScript 에서는 Props의 타입을 먼저 정의한 후 defineProps() 에 제네릭으로 타입을 선언하면 위와 같이 사용할 수 있습니다.
<template>
<!-- 템플릿 내에서 사용할 때는 props를 호출하지 않아도 된다. -->
<div class="nickname">{{ nickname }}</div>
</template>
<!-- By JavaScript -->
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
test: string,
})
console.log(props.test); // props를 먼저 선언해야 nickname 이 찍힌다.
</script>
<!-- By TypeScript -->
<script setup lang="ts">
import { defineProps } from 'vue'
interface Props {
test: string;
}
const props = defineProps<Props>()
console.log(props.test)
</script> 참고
자주쓰는 vue3
