Vue3 script setup 문법 정리 – SFC의 최신 스타일

Vue3에서는 Composition API를 더 간결하고 효율적으로 사용할 수 있도록 <script setup> 이라는 새로운 SFC(Single File Component) 문법을 도입했습니다. 이 문법은 기존의 setup() 함수보다 훨씬 간단하면서도 강력한 개발 경험을 제공합니다.

기존 Composition API vs <script setup>

기존 방식

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    return { count }
  }
}
</script>

script setup 방식

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

• setup() 함수를 생략하고, <script setup> 안에서 직접 변수 선언
• return이 필요 없음 (모든 선언이 템플릿에서 자동으로 사용 가능)
• 코드 양이 확 줄고 타입 지원, 자동 완성도 훨씬 좋아짐

핵심 특징 정리

기능	설명
`setup()` 생략	자동으로 처리되며, 코드 간결해짐
`return` 필요 없음	선언한 변수와 함수가 자동으로 템플릿에 바인딩됨
더 빠른 렌더링	Vue 내부 최적화 덕분에 성능도 더 좋음
`defineProps`, `defineEmits` 사용 가능	컴포넌트 간 통신도 훨씬 깔끔하게 가능

예제: Props와 Emits 사용

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  title: String,
})

const emit = defineEmits(['clicked'])

const handleClick = () => emit('clicked')
</script>

<template>
  <button @click="handleClick">{{ props.title }}</button>
</template>

• defineProps, defineEmits는 전역 함수처럼 쓰이지만 실제로는 컴파일 타임 매크로
• props나 emit도 setup() 없이 직접 선언 가능

추가 기능: TypeScript와 함께 사용하기

<script setup lang="ts">
interface Props {
  title: string
}

const props = defineProps<Props>()
</script>

• 타입 명시도 훨씬 간결하고 안전하게 작성 가능
• lang="ts"만 선언하면 TypeScript 자동 적용

기타 팁

기능	설명
`useXXX()` 훅 함수 작성 용이	Custom Hook 구성하기 매우 쉬움
`defineExpose()`	부모 컴포넌트에서 자식의 메서드 등 접근 가능
`<script setup>` + `<script>` 동시 사용 가능	필요시 명확히 분리 가능 (`<script>`는 일반 옵션 API 용도)

Vue3의 <script setup>은 기존 setup()보다 훨씬 간결하면서도 강력한 방식입니다. 불필요한 보일러플레이트를 제거하고, 템플릿과의 연동도 자동으로 처리되기 때문에 Vue3에서 새로 컴포넌트를 작성할 때는 <script setup>을 기본 선택지로 삼는 것이 좋습니다. 다음 포스팅에서는 Vue3의 새로운 기능인 Teleport와 Suspense에 대해 다뤄보겠습니다. (포털 기능과 비동기 컴포넌트 처리에 매우 유용합니다.)