# Composition API (Vue.js / Nuxt.js)

> Setup function, ref, reactive, computed, watch, lifecycle hooks, composables, script setup

- 24 면접 질문
- Mid-Level
- [면접 질문: Vue.js / Nuxt.js](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions.md)

## 1. Vue 3의 Composition API란 무엇인가요?

**답변**

Composition API는 options(data, methods, computed) 대신 composition function을 사용하여 Vue 컴포넌트 로직을 구성하는 새로운 방식입니다. 옵션 종류별이 아니라 기능별로 로직을 묶을 수 있어 composable을 통한 코드 재사용이 쉬워집니다. 또한 더 나은 TypeScript 지원과 복잡한 컴포넌트에 대한 더 나은 구조화를 제공합니다.

## 2. Composition API에서 컴포넌트의 로직을 정의하는 데 사용되는 주요 함수는 무엇인가요?

**답변**

setup() 함수는 Composition API의 진입점입니다. 컴포넌트가 생성되기 전, 심지어 created()보다도 먼저 실행됩니다. props와 context를 인자로 받으며, template에 노출할 데이터와 함수를 담은 객체를 반환해야 합니다. ref, reactive, computed, watch와 Composition API의 lifecycle hooks를 사용하는 곳이 바로 이 setup() 안입니다.

## 3. ref()와 reactive()의 주요 차이점은 무엇인가요?

**답변**

ref()는 primitive 값이나 객체에 대한 반응형 참조를 생성하며, script에서는 .value를 통해 접근합니다(다만 template에서는 자동으로 unwrap됩니다). reactive()는 객체와 배열에만 반응형 proxy를 생성하며 .value가 필요 없지만 구조 분해하면 반응성을 잃습니다. ref()는 primitive에 더 범용적이고, reactive()는 복잡한 객체에 더 자연스럽지만 구조 분해 시 toRef/toRefs가 필요합니다.

## 21개 추가 질문 이용 가능

- setup() 함수에서 ref의 값에 어떻게 접근하나요?
- Composition API에서 computed 속성을 어떻게 만드나요?

무료로 가입하기: https://sharpskill.dev/ko/login

## 기타 Vue.js / Nuxt.js 면접 주제

- [JavaScript 기초](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/javascript-fundamentals.md): 20개 질문, Junior
- [모던 JavaScript (ES6+)](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/es6-modern-javascript.md): 20개 질문, Junior
- [Vue 기초](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/vue-basics.md): 22개 질문, Junior
- [Vue 컴포넌트](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/vue-components.md): 20개 질문, Junior
- [Vue Router](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/vue-router.md): 18개 질문, Junior
- [Pinia State Management](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/pinia-state-management.md): 20개 질문, Junior
- [Vuex (Legacy)](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/vuex-legacy.md): 15개 질문, Mid-Level
- [Vue 반응성](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/vue-reactivity.md): 20개 질문, Mid-Level
- [Nuxt 기초](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/nuxt-fundamentals.md): 22개 질문, Mid-Level
- [Nuxt 데이터 페칭](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/nuxt-data-fetching.md): 20개 질문, Mid-Level
- [Nuxt SSR 및 SSG](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/nuxt-ssr-ssg.md): 22개 질문, Mid-Level
- [Nuxt 서버 라우트](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/nuxt-server-routes.md): 20개 질문, Mid-Level
- [Nuxt 모듈](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/nuxt-modules.md): 18개 질문, Mid-Level
- [Vue 컴포저블](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/vue-composables.md): 20개 질문, Mid-Level
- [Vue 폼과 유효성 검사](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/vue-forms-validation.md): 20개 질문, Mid-Level
- [Nuxt 상태 관리](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/nuxt-state-management.md): 18개 질문, Mid-Level
- [Vue 테스팅](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/vue-testing.md): 20개 질문, Mid-Level
- [Nuxt 배포 및 CI/CD](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/nuxt-deployment-cicd.md): 22개 질문, Mid-Level
- [Vue 성능](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/vue-performance.md): 22개 질문, Senior
- [Vue 고급 패턴](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/vue-advanced-patterns.md): 24개 질문, Senior
- [Vue와 함께 사용하는 TypeScript](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/typescript-vue.md): 22개 질문, Senior
- [Nuxt 인증](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/nuxt-auth.md): 20개 질문, Senior
- [Nuxt에서의 SEO](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/nuxt-seo.md): 20개 질문, Senior
- [Nuxt 국제화](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/nuxt-i18n.md): 18개 질문, Senior
- [Vue 아키텍처](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/vue-architecture.md): 22개 질문, Senior
- [Nuxt 보안](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/nuxt-security.md): 20개 질문, Senior
- [Vue 생태계](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/vue-ecosystem.md): 18개 질문, Senior
- [Vue 2→3 및 Nuxt 2→3 마이그레이션](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/migration-vue2-vue3-nuxt2-nuxt3.md): 22개 질문, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/composition-api