Vue3 setup() 함수 완벽 가이드: Composition API의 시작 점

왜 setup()이 중요한가?

Vue3에서 가장 큰 변화는 바로 Composition API의 도입입니다. 그 중심에 있는 것이 setup() 함수인데요, 이 함수는 Vue3 컴포넌트가 실행되기 전에 가장 먼저 호출되는 함수로, 반응형 변수 정의, 로직 분리, props/emit 처리 등 모든 핵심 동작의 출발점입니다. Vue2의 data, methods, computed 등을 하나의 공간에서 함수형으로 작성할 수 있게 해주는 Vue3의 뼈대이자 심장이라 할 수 있어요.

1. setup() 함수란?

setup()은 컴포넌트가 생성될 때 가장 먼저 실행되며, 다음과 같은 역할을 합니다.

반응형 변수 정의 (ref, reactive)
함수 정의
props 및 emit 처리
라이프사이클 훅 등록
반환한 값들을 템플릿에서 직접 사용할 수 있게 함

export default {
  setup() {
    // 모든 로직은 여기서 시작
  }
}

2. ref와 reactive(반응형 변수 만들기)

setup() 안에서는 Vue3의 반응형 시스템을 활용해 변수나 객체를 선언할 수 있습니다.
-. ref (기본형 변수)

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0); // 반응형 숫자
    const increment = () => count.value++;
    return { count, increment };
  }
}

※ ref로 선언한 변수는 .value로 접근해야 합니다. 템플릿에서는 .value 없이도 사용 가능합니다.

-. reactive (객체 전체를 반응형으로)

import { reactive } from 'vue';

export default {
  setup() {
    const user = reactive({
      name: 'Lee',
      age: 30
    });
    return { user };
  }
}

※ reactive는 객체 전체를 감싸는 반면, ref는 단일 값에 사용됩니다.

3. props와 emit 사용하기

setup() 함수는 두 개의 인자를 받습니다.

setup(props, context) {
  console.log(props.title);
  context.emit('custom-event');
}

props: 부모로부터 전달받은 데이터
context.emit: 자식 → 부모로 이벤트 전달할 때 사용

-. 예제

<!-- 부모 컴포넌트 -->
<MyButton @click-me="handleClick" :label="버튼" />

// 자식 컴포넌트 (MyButton.vue)
export default {
  props: ['label'],
  setup(props, { emit }) {
    const handleClick = () => emit('click-me');
    return { handleClick };
  }
}

4. 라이프사이클 훅 사용하기

Vue2에서 mounted, created 등을 사용하던 방식은 Vue3에서 함수형 훅으로 바뀌었습니다.

import { onMounted } from 'vue';

setup() {
  onMounted(() => {
    console.log('컴포넌트가 마운트되었습니다!');
  });
}

사용 가능한 훅들

onMounted
onUpdated
onUnmounted
onBeforeMount 등

5. setup()에서 반환된 것만 템플릿에서 사용 가능

setup()에서 반환한 변수와 함수만 <template>에서 사용할 수 있습니다.

setup() {
  const message = ref('Hello Vue3');
  return { message };
}
<template>
  <p>{{ message }}</p>
</template>

setup()은 Vue3의 중심 축

Vue2에서 여러 옵션으로 나뉘던 코드가, Vue3에서는 setup() 함수 안에서 하나의 함수형 공간으로 통합되었습니다. 이를 통해 코드가 더 읽기 쉬워지고, 재사용성과 유지보수성이 대폭 향상됩니다. Vue3를 제대로 배우고 싶다면, 반드시 setup() 함수의 구조와 사용법을 완전히 이해하는 것이 중요합니다. 다음 글에서는 ref()와 reactive()의 차이를 더욱 자세히 비교해보고, 어떤 상황에서 어떤 방식이 더 적합한지 실전 예제를 통해 소개하겠습니다.

저작자표시 (새창열림)

엄마의 인생노트