Vue 3 Composition API 관련 심화 내용

<script setup></script>

Vue 3에서 <script setup>은 단일 파일 컴포넌트(Single File Component, SFC) 내에서 선언적이고 간결한 구문을 사용하여 컴포넌트의 구성을 단순화하기 위한 기능입니다. 이 구문은 Vue 3의 Composition API를 더 쉽고 효율적으로 사용할 수 있게 해줍니다. <script setup>의 주요 목적과 특징은 다음과 같습니다:

1. 간결성: <script setup>을 사용하면 별도의 import 문을 사용하여 필요한 함수나 컴포넌트를 가져온 후, setup 함수 내에서 반환할 필요 없이 직접 사용할 수 있습니다. 이는 코드의 양을 줄이고 가독성을 향상시킵니다.
2. 컴파일러 지시문 활용: Vue 컴파일러는 <script setup> 내의 코드를 자동으로 setup 함수로 처리합니다. 이를 통해 더 효율적으로 컴파일링 할 수 있으며, 성능 최적화에 기여합니다.
3. 편리한 props 및 이벤트 정의: <script setup> 내에서 defineProps 및 defineEmits 함수를 사용하여 컴포넌트의 props와 이벤트를 쉽게 정의할 수 있습니다. 이 함수들은 Vue 컴파일러에 의해 자동으로 인식되어 별도의 import 없이 사용할 수 있습니다.
4. Composition API와의 통합: <script setup>은 Composition API와 함께 사용되도록 설계되었습니다. ref, reactive와 같은 Composition API 함수들을 자연스럽게 통합하여 사용할 수 있습니다.
5. TypeScript 지원: <script setup>은 TypeScript와 잘 통합됩니다. 타입스크립트를 사용하는 경우, 타입 추론 및 타입 체킹의 이점을 활용할 수 있습니다.
6. 코드 재사용 및 조직화: 컴포지션 함수(재사용 가능한 로직)를 쉽게 임포트하여 사용할 수 있어, 코드의 재사용성과 조직성을 향상시킵니다.

예를 들어, <script setup>을 사용하면 다음과 같이 컴포넌트를 간결하게 작성할 수 있습니다:

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

const count = ref(0)

function increment() {
    count.value++
}
</script>

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

이 구문은 Vue 3에서 새로운 컴포넌트를 작성할 때 효율적이고 선언적인 방식을 제공합니다.

ref() vs toRefs()

Vue 3의 Composition API에서 ref()와 toRefs()는 반응형 참조를 다루는 데 사용되지만, 각각 다른 목적과 사용 방식을 가지고 있습니다.

1. ref():
   • ref() 함수는 주로 기본 타입(문자열, 숫자, 불리언 등) 또는 객체/배열 등을 반응형 데이터로 만들기 위해 사용됩니다.
   • ref()를 사용하여 생성된 참조는 .value 속성을 통해 실제 값을 얻거나 설정합니다.
   • ref()는 단일 값에 대한 반응성을 제공하며, 주로 템플릿에서 직접적으로 사용될 때 유용합니다.
   • 예시:

     import { ref } from 'vue';
     const count = ref(0); // 반응형 데이터 생성 count.value++; // 값 변경

2. toRefs():
   • toRefs() 함수는 반응형 객체의 각 속성을 개별적인 ref로 변환하여, 구조 분해(destructuring) 시에도 반응성을 유지할 수 있게 해줍니다.
   • 객체의 각 속성을 개별적인 반응형 참조로 변환하고, 이러한 참조들은 원본 객체의 속성과 동기화됩니다.
   • toRefs()는 주로 여러 속성을 포함하는 반응형 객체를 구조 분해할 때 사용되며, 이를 통해 각 속성이 독립적인 반응형 참조로 유지됩니다.
   • 예시:

     import { reactive, toRefs } from 'vue';
     const state = reactive({ count: 0, name: 'Vue' });
     const { count, name } = toRefs(state); // 각 속성을 ref로 변환
     count.value++; // 반응형 참조를 통한 값 변경

간단히 말해서, ref()는 단일 값에 대한 반응성을 제공하는 반면, toRefs()는 객체의 각 속성을 독립적인 반응형 참조로 변환하여 구조 분해 시에도 반응성을 유지하도록 해줍니다.