vue: setup 함수

setup함수로 관리되는 코드 width chtGPT

 

vue3의 setup 함수는 Composition API의 핵심으로, 컴포넌트의 초기화와 관련된 로직을 정의하는 곳입니다.

컴포넌트가 생성될 때 가장 먼저 호출되며, 여기에서 상태 변수나 메서드 등을 설정할 수 있습니다. setup에서 정의된 데이터는 컴포넌트의 반응형 상태로 관리되고, 템플릿에서 쉽게 사용할 수 있습니다.

 

 setup 함수의 주요 특징

• 초기화 위치: setup 함수는 컴포넌트가 생성되기 전에 호출되어 data, computed, methods 등의 Option API 속성 대신 사용됩니다.
• 반응형 데이터: ref와 reactive를 사용하여 반응형 데이터를 설정하고 관리할 수 있습니다.
• 반환값: setup 함수는 컴포넌트에서 사용할 데이터와 메서드를 반환합니다. 반환된 값들은 다른 로직에서 접근할 수 있습니다.

샘플 코드

아래는 setup 함수에서 반응형 상태를 정의하고 이를 템플릿에 연결하는 간단한 예제입니다.

<script setup>
import { ref, reactive, onMounted } from  'vue';

//1. ref로 반응형 상태 선언 (단일값)
const count = ref(0);

//2. reactive로 반응형 객체 선언
const user = reactive({
	name: 'Alice',
    age: 25,
});

//3. 메서드 정의
function increment(){
	count.value++;
}

//4. 라이프 사이클 훅 사용 (onMounted)
onMounted(() => {
	console.log('Component has been mounted');
});
</script>


<template>
	<div>
    	<p>Count: {{ count }}</p>
        <button @click="increment">Increment</button>
        
        <p>Usre INfo</p>
        <p>Nmae: {{ user.name }}</p>
        <p>Age: {{ user.age }}</p>
    </div>
</template>

 

★ Vue SFC Playground 코드 실행 →

 

코드설명

1. 반응형 상태:

• count는 ref를 사용해 숫자 값을 반응형으로 만들었습니다.
  count.value로 접근해야 합니다.
• user는 reactive로 만들어진 객체로, 객체 내부의 속성들이 모두 반응형이 됩니다.

2. 메서드 정의:

• increment 메서드는 count를 1씩 증가시키는 함수 입니다. 이 메서드는 템플릿에서 버튼 클릭 시 호출됩니다.

3. 라이프사이클 훅 사용:

• onMounted는 컴포넌트가 마운트된 후에 호출됩니다. 주로 컴포넌트 초기화 로직,  API 호출 등을 여기에 넣습니다.

4. 템플릿:

• setup에서 반환된 count와 user 데이터, 그리고 increment 메서드를 템플릿에서 사용할 수 있습니다.

 

요약

setup 함수는 Vue3 Composition API 의 중심으로, 컴퍼넌트의 초기화와 관련된 모든 로직을 하나의 함수 내에서 관리할 수 있습니다. 이로 인해 코드가 더 직관적이고 가독성이 높아지며, 큰 규모의 프로젝트에서 특히 유리합니다.