Vue3 script setup 문법

Vue3에서 사용되는 script setup 문법은 이전과 어떤 차이가 있을까?

 

 

 

 

Vue3 이전에 외부 컴포넌트 모듈을 import할 때는

아래 코드와 같이 Import 문과, components 속성에 컴포넌트를 추가해야 한다.

 

이는 import문 만으로 끝나지 않아 보일러 플레이트 코드가 길어진다는 것을 의미한다.

애플리케이션의 사이즈가 커질수록 components 속성에 해당 컴포넌트 모듈을 하나씩 작성해야하는 반복 작업이 늘어난다.

 

vue3에서 도입된 script setup 문법을 사용하면, 반복 작업을 줄일 수 있다.

<template>
  <HelloWorld />
</template>

<script lang="ts">
  import HelloWorld from '@/components/HelloWorld.vue' //import 문

export default {
  components: { // 컴포넌트 등록
    HelloWorld
  }
}
</script>

 

 

# script setup 문법?

script 문법에 setup 속성을 추가한 문법

<script setup>
console.log('안녕, script setup!')
</script>

내부 코드는 컴포넌트의 setup() 함수 내용으로 컴파일되어

컴포넌트를 처음 가져올 때 한 번만 실행되는 일반적인 <script>와 달리,

<script setup> 내부의 코드는 컴포넌트의 인스턴스가 생성될 때마다 실행된다.

 

 

# script setup 문법의 장점!

일반 script 문법과는 달리, script setup 문법을 사용하면 아래와 같은 장점들로 코드를 줄일 수 있다.

 

1. import 만으로 컴포넌트를 불러올 수 있다.

<template>
  <HelloWorld />
</template>

<script lang="ts" setup>
  import HelloWorld from '@/components/HelloWorld.vue'
</script>

 

2. 내부에 선언된 모든 최상위 바인딩(변수, 함수 선언 및 import 포함)은 템플릿에서 직접 사용할 수 있다.

3. return문, export default 구문 등이 모두 필요없다.

<script setup>
// 변수 선언
const msg = 'Hello!'

// 함수 선언
function log() {
  console.log(msg)
}
</script>

<template>
  <!-- 템플릿 안에서 바로 사용 가능 -->
  <div @click="log">{{ msg }}</div>
</template>

 

 

4. props 및 emits와 같은 옵션을 선언하려면, script setup 내에서 자동으로 사용할 수 있는 defineProps() 및 defineEmits() API를 사용할 수 있다. 

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// ... setup 코드
</script>

 

5. Props 및 emits는 리터럴 타입 인자를 defineProps 또는 defineEmits에 전달하여 순수 타입 문법을 사용하여 선언할 수도 있다.

const props = defineProps<{
  foo: string
  bar?: number
}>()

const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()

// 3.3+: alternative, more succinct syntax
const emit = defineEmits<{
  change: [id: number] // named tuple syntax
  update: [value: string]
}>()

 

 

 

이 외에도 script setup 문법 특징은 아래 링크에서 확인하자!

https://ko.vuejs.org/api/sfc-script-setup.html