Vue.js에서 setup() 함수는 어떻게 사용하나요?

Q1: Vue.js의 setup() 함수란 무엇인가요?
A1: setup() 함수는 Vue 3에서 도입된 Composition API의 핵심 함수로, 컴포넌트가 생성될 때 가장 먼저 호출됩니다. 여기서 컴포넌트 내의 반응형 상태, 메서드, 계산 속성 등을 정의하며, 기존 Options API의 data, methods, computed 등을 대체하거나 보완합니다.

Q2: setup() 함수는 어디에 위치하나요?
A2: setup() 함수는 Vue 컴포넌트 내에 하나의 옵션으로 위치합니다. 예를 들어:
```js
export default {
setup() {
// 로직 작성
return { /* 템플릿에 노출할 데이터/함수 */ }
}
}
```

Q3: setup() 함수는 어떤 매개변수를 받나요?
A3: setup(props, context) 두 가지 매개변수를 받습니다.
- props: 부모로부터 전달받은 props 객체
- context: { attrs, slots, emit }를 포함하는 객체로, 컴포넌트 속성, 슬롯, 이벤트 발행에 접근할 수 있습니다.

Q4: setup() 함수 내에서 반응형 상태는 어떻게 만드나요?
A4: Vue 3에서 제공하는 reactive(), ref() 함수를 사용합니다.
```js
import { ref, reactive } from 'vue'

setup() {
const count = ref(0)
const state = reactive({ name: 'Vue' })
// ...
return { count, state }
}
```

Q5: setup() 함수 내에서 메서드나 계산 속성은 어떻게 정의하나요?
A5: 메서드는 일반 함수로, 계산 속성은 computed() 함수를 활용해 정의합니다.
```js
import { computed } from 'vue'

setup() {
const count = ref(0)
const double = computed(() => count.value * 2)

function increment() {
count.value++
}

return { count, double, increment }
} ```

Q6: setup() 함수에서 반환하는 값의 역할은 무엇인가요?
A6: setup()에서 반환한 객체 안의 모든 프로퍼티와 함수는 컴포넌트 템플릿 내에서 직접 사용할 수 있습니다. 반환하지 않은 내부 변수나 함수는 템플릿에서 접근할 수 없습니다.

Q7: 기존 Options API의 data, methods, computed 대신 전부 setup()에 작성해야 하나요?
A7: 반드시 그럴 필요는 없고, 필요에 따라 혼합해서 쓸 수도 있으나, Composition API를 사용하는 주요 이유는 로직 재사용성과 가독성 향상이므로 가능하면 setup()으로 작성하는 것이 권장됩니다.

Q8: setup() 내부에서 this 사용이 가능한가요?
A8: 아닙니다. setup()은 인스턴스 생성 이전에 호출되어 this가 undefined이므로, 절대 this에 의존하지 않습니다. reactive 상태는 ref 나 reactive를 통해 직접 접근해야 합니다.

Q9: 외부 API 호출이나 라이프사이클 훅은 setup()에서 어떻게 사용하나요?
A9: Vue 3에서 제공하는 라이프사이클 훅(예: onMounted, onUnmounted)을 setup 내부에서 직접 import하여 사용할 수 있습니다.
```js
import { onMounted } from 'vue'

setup() {
onMounted(() => {
// 초기화 작업
})
}
```

Q10: setup() 함수 예제 코드
```js
import { ref, computed, onMounted } from 'vue'

export default {
setup(props, { emit }) {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)

function increment() {
count.value++
emit('incremented', count.value)
}

onMounted(() => {
console.log('컴포넌트가 마운트됨')
})

return { count, doubleCount, increment }
}
}
```

요약하면, setup() 함수 내에서 Vue 3의 Composition API를 사용하여 상태와 로직을 선언하고, 반환한 값을 템플릿이나 다른 부분에서 사용할 수 있도록 하는 역할을 합니다.

Vue.js에서 `setup()` 함수는 Vue 3의 Composition API의 핵심 요소로, 컴포넌트의 상태와 로직을 정의하는 데 사용됩니다. `setup()` 함수는 컴포넌트가 생성될 때 호출되며, 이 함수 내에서 reactive 상태, computed 속성, 메서드 등을 정의할 수 있습니다. 아래에서 `setup()` 함수의 사용법과 그 특징에 대해 자세히 설명하겠습니다. 1. `setup()` 함수의 기본 구조 `setup()` 함수는 컴포넌트의 props와 context를 인자로 받습니다. 기본적인 구조는 다음과 같습니다: ```javascript import { defineComponent } from 'vue'; export default defineComponent({ props: { // props 정의 }, setup(props, context) { // reactive <a href='https://sangseek.com/sangseeks/상태 정의/ko'>상태 정의</a> // computed 속성 정의 // 메서드 정의 return { // <a href='https://sangseek.com/sangseeks/템플릿/ko'>템플릿</a>에서 사용할 데이터와 메서드 반환 }; } }); ``` 2. Reactive 상태 관리 `setup()` 함수 내에서 `reactive` 또는 `ref`를 사용하여 반응형 상태를 정의할 수 있습니다. `reactive`는 객체를 반응형으로 만들고, `ref`는 기본 데이터 타입을 반응형으로 만듭니다. ```javascript import { ref, reactive } from 'vue'; setup() { const count = ref(0); // 기본 타입의 반응형 상태 const state = reactive({ name: 'Vue', version: 3 }); // 객체의 반응형 상태 function increment() { count.value++; } return { count, state, increment }; } ``` 3. Computed 속성 `computed`를 사용하여 계산된 속성을 정의할 수 있습니다. 이는 종속된 반응형 상태가 변경될 때 자동으로 업데이트됩니다. ```javascript import { computed } from 'vue'; setup() { const count = ref(0); const doubleCount = computed(() => count.value * 2); return { count, doubleCount }; } ``` 4. Lifecycle Hooks `setup()` 함수 내에서 Vue의 라이프사이클 훅을 사용할 수 있습니다. 예를 들어, `onMounted`, `onUpdated`, `onUnmounted` 등을 사용할 수 있습니다. ```javascript import { onMounted } from 'vue'; setup() { onMounted(() => { console.log('컴포넌트가 마운트되었습니다.'); }); } ``` 5. Context 객체 `setup()` 함수의 두 번째 인자인 `context` 객체를 통해 `attrs`, `slots`, `emit` 등을 사용할 수 있습니다. ```javascript setup(props, { emit }) { function handleClick() { emit('customEvent', { message: 'Hello' }); } return { handleClick }; } ``` 6. 템플릿에서 사용하기 `setup()` 함수에서 반환된 데이터와 메서드는 템플릿에서 직접 사용할 수 있습니다. ```html <template> <div> <p>Count: 이중 중괄호 열기 count 이중 중괄호 닫기</p> <p>Double Count: 이중 중괄호 열기 doubleCount 이중 중괄호 닫기</p> <button @click="increment">Increment</button> </div> </template> ``` 7. 결론 `setup()` 함수는 Vue 3의 Composition API의 중심으로, 컴포넌트의 상태와 로직을 더 명확하고 유연하게 관리할 수 있게 해줍니다. 이를 통해 코드의 재사용성과 가독성을 높일 수 있으며, 복잡한 컴포넌트의 구조를 단순화할 수 있습니다. Vue 3를 사용할 때 `setup()` 함수를 적극적으로 활용하여 더 나은 컴포넌트를 작성해 보세요.