script setup 소개
이 setup()으로 컴파일되는 방식, 자동 import, 템플릿에서 사용할 수 있는 최상위 바인딩을 알아봅니다.
script setup 소개은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
더 깔끔한 Composition API
<script setup>은 Composition API를 위한 컴파일 시점 문법 설탕입니다. 불필요한 반복 코드를 없애 단일 파일 컴포넌트를 반응형 변수가 있는 일반 JavaScript처럼 읽을 수 있게 합니다.
setup()에서 script setup으로
기존 형식에서는 export default, setup() 함수, 명시적인 return이 필요합니다. 이를 <script setup> 버전과 비교해 보십시오.
<!-- classic -->
<script>
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
return { count }
}
}
</script>script setup 버전
<script setup>에는 래퍼 객체도 return 문도 없습니다. 최상위 변수는 자동으로 템플릿에 노출됩니다.
<!-- script setup -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>명시적인 Return이 필요하지 않습니다
컴파일러는 모든 최상위 바인딩인 변수, 함수, 가져온 항목을 템플릿에서 사용할 수 있는 것으로 처리합니다. 작성할 코드가 줄어들고 무언가를 return하는 것을 잊을 위험도 없습니다.
최상위 함수도 사용할 수 있습니다
최상위에서 함수를 정의한 다음 템플릿에 직접 연결하십시오. 함수를 return할 필요가 없습니다.
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() { count.value++ }
</script>
<template>
<button @click="increment">{{ count }}</button>
</template>가져온 컴포넌트는 자동으로 등록됩니다
기존 API에서는 components 옵션에 컴포넌트를 나열해야 했습니다. <script setup>에서는 컴포넌트를 가져오기만 하면 템플릿에서 사용할 수 있습니다.
<script setup>
import BaseButton from './BaseButton.vue'
</script>
<template>
<BaseButton />
</template>여전히 setup()으로 컴파일됩니다
내부적으로 컴파일러는 <script setup>을 일반적인 setup() 함수로 변환합니다. 작성 방식만 더 깔끔해질 뿐, 동일한 동작과 성능을 얻을 수 있습니다.
lang ts로 TypeScript 추가하기
태그에 lang="ts"를 추가하여 TypeScript를 활성화할 수 있습니다. 그러면 변수에 타입을 지정하고, 컴파일러 매크로에 제네릭을 사용하며, 완전한 타입 추론을 받을 수 있습니다.
<script setup lang="ts">
import { ref } from 'vue'
const count = ref<number>(0)
</script>컴파일러 매크로
<script setup> 안에서는 defineProps, defineEmits, defineExpose와 같은 특수한 컴파일러 매크로를 사용할 수 있습니다. 이들은 가져오지 않아도 컴파일러가 인식합니다. 다음 레슨에서 각각을 살펴보겠습니다.
일반 script 블록과 함께 사용하기
사용자 지정 컴포넌트 이름처럼 모듈 범위에서 한 번 실행해야 하는 옵션이 필요한 경우가 있습니다. 일반 <script> 블록을 <script setup>과 함께 추가할 수 있습니다.
<script>
export default { name: 'MyComponent' }
</script>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>팀에서 script setup을 선호하는 이유
- 불필요한 반복 코드가 적습니다. 래퍼 객체나 return이 필요하지 않습니다.
- 컴포넌트가 자동으로 등록됩니다.
- 컴파일 시점 분석으로 런타임 성능이 향상됩니다.
- TypeScript를 훌륭하게 지원합니다.
Vue 3 단일 파일 컴포넌트에 권장되는 작성 방식입니다.
빠른 확인
script setup에 대한 이해를 확인해 보십시오.
복습
<script setup>의 핵심을 배웠습니다.
setup()을 기반으로 하는 컴파일 시점 문법 설탕입니다.- 명시적인 return이 필요하지 않으며 최상위 바인딩이 자동으로 노출됩니다.
- 가져온 컴포넌트가 자동으로 등록됩니다.
- TypeScript를 사용하려면
lang="ts"를 추가합니다. defineProps와 같은 컴파일러 매크로를 가져오지 않고도 사용할 수 있습니다.
자주 묻는 질문
“script setup 소개” 강의는 무료인가요?
네 — “script setup 소개” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“script setup 소개”에서 뭘 배우나요?
이 setup()으로 컴파일되는 방식, 자동 import, 템플릿에서 사용할 수 있는 최상위 바인딩을 알아봅니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Vue Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“script setup 소개” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.