[VueJS] Vue3 - setup() 과 <script setup>의 차이

Vue3에서의 Composition API와 setup

Vue3의 등장 예고와 함께 사용되어진 Composition API, Vue2.7 버전 미만을 사용할 경우에는 따로 플러그인을 설치해서 사용할 수 있으며, Vue2.7 이상부터는 Vue3처럼 Composition API를 사용할 수 있다.

 

이 Composition API의 등장과 함께 setup 함수가 등장하였다.

이 setup함수를 사용하여 반응형 데이터를 만들고, 라이프 사이클을 제어하는 등 Vue2 버전에서부터 사용되어 왔던 optioins api에서 사용했던 그 모든것을 Composition API에서는 setup함수 안에서 처리해준다.

 

그런데 여기서 공식문서를 살펴보면 Composition API의 setup함수가 있고, <script setup>이 존재한다.

둘다 setup임에는 분명한데 무슨 차이가 있는지 한번 살펴보자.

setup()

<script setup>과의 차이점을 설명하자면 역시 코드를 먼저 살펴보는 것이 좋을 것 같다.

<!-- MyBook.vue -->
<template>
  <div>{{ collectionName }}: {{ readersNumber }} {{ book.title }}</div>
  <button @click="incresement">incresement</button>
</template>

<script>
import { ref, reactive } from "vue";

export default {
  props: {
    collectionName: String,
  },
  setup(props) {
    const readersNumber = ref(0);
    const book = reactive({ title: "Vue 3 Guide" });
    const incresement = () => {
      readersNumber.value += 1;
    };
    // expose to template
    return {
      readersNumber,
      book,
      incresement,
    };
  },
};
</script>

setup()은 props를 사용하고, 반응형을 주입하는 ref, reactive를 사용한 변수를 가지고 return을 해 template에서 사용하는 방식이다. (더 자세한 건 공식문서를 확인해보도록 하자.)

 

이제 이 코드가 <script setup>을 사용하면 어떻게 변하는지 확인해보자.

<script setup>

<script setup>이란 싱글 파일 컴포넌트(SRC) 내에서 Composition API를 사용하기 위한 문법적 설탕이다.

공식문서에서도 SFC와 Composition API를 사용하는 경우 <script setup>을 사용하라고 권장하고 있다.

 

자 그럼 대충 설명을 보았으니 위 코드와 뭐가 다른지 확인해보자.

<!-- MyBook.vue -->
<template>
  <div>{{ collectionName }}: {{ readersNumber }} {{ book.title }}</div>
  <button @click="incresement">incresement</button>
</template>

<script setup>
  import { ref, reactive } from "vue";
  const props = defineProps({
    collectionName: String,
  });

  const readersNumber = ref(0);
  const book = reactive({ title: "Vue 3 Guide" });
  const incresement = () => {
    readersNumber.value += 1;
  };
</script>

딱 그냥 보기만 해도 코드가 깔끔해진 것을 느낄 수 있는데, setup()과 다른 점은 props를 선언하는 부분이 달라졌으며, return 하는 부분이 사라졌다는 것이다.

 

심지어 위 예제에서는 다루고 있지 않지만 import를 한 것을 그대로 return 없이 사용할 수도 있다는 게 큰 장점이다.

 

공식문서에서 다루고 있는 <script setup>의 장점에는 다음이 있다.

• 더 적은 상용구로 더 간결한 코드 작성
• 타입 스크립트를 사용해 props와 emmited value 선언 가능
• 런타임 성능의 향상 (템플릿이 <script setup>과 같은 스코프에 있는 render 함수로 컴파일되므로 프록시가 필요 없다.)
• 더 뛰어난 IDE 타입 추론 성능 (language server가 코드로부터 타입을 추론해내는데 비용이 덜 든다.)

---

본인이 가장 큰 차이점이라고 생각하는 부분이 위에서 설명한 부분이기 때문에 좀 더 자세한 내용을 보고자 하면 아래 공식문서를 통해 비교해 보는 걸 추천한다. (위에서 설명한 것 외에도 다른 차이점들이 존재할 테니)

그 외에도 설명이 필요한 부분들은 많겠지만 이 게시글은 setup()과 <script setup>의 차이점에 대해서만 다루고자 하니 그 외 다른 것들에 대한 내용은 추후에 정리하고자 한다.

---

참고: https://v3.ko.vuejs.org/guide/composition-api-setup.html#

Setup | Vue.js

참고: https://vuejs.org/api/composition-api-setup.html

Composition API: setup() | Vue.js

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

<script setup> | Vue.js