# Vue 반응성 (Vue.js / Nuxt.js)

> Reactivity system, reactive vs ref, toRef, toRefs, unref, shallow reactivity, readonly

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

## 1. Vue의 반응성 시스템이란 무엇인가요?

**답변**

Vue의 반응성 시스템은 데이터의 변경을 자동으로 감지하고 그에 따라 DOM을 업데이트합니다. 프로퍼티 접근과 수정을 가로채는 JavaScript Proxy에 의존합니다. 이 시스템은 수동 개입 없이도 사용자 인터페이스가 애플리케이션 상태와 동기화된 상태를 유지하도록 보장합니다.

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

**답변**

ref()는 primitive 값이나 객체에 대한 반응형 참조를 생성하며 .value를 통해 접근합니다. 반면 reactive()는 객체의 반응형 proxy를 생성하며 프로퍼티에 접근할 때 .value가 필요하지 않습니다. ref()는 범용적이며(primitive + 객체) 단순한 값에 이상적인 반면, reactive()는 객체에 최적화되어 있지만 primitive에는 동작하지 않습니다. 실무에서는 모든 타입에서 동작하기 때문에 ref()가 자주 선호됩니다.

## 3. template과 script에서 ref의 값에 어떻게 접근하나요?

**답변**

template에서는 Vue가 ref를 자동으로 unwrap하므로 .value 없이 직접 접근할 수 있습니다(예: {{ count }}). script에서는 ref의 값을 읽거나 수정하기 위해 .value를 사용해야 합니다(예: count.value++). template에서의 이 자동 동작은 코드 작성을 단순화하면서 JavaScript 로직에서는 명시적인 제어를 유지합니다.

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

- reactive() 객체를 구조 분해하면 어떻게 되나요?
- Vue에서 toRefs()의 용도는 무엇인가요?

무료로 가입하기: 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
- [Composition API](https://sharpskill.dev/ko/technologies/vue-nuxt/interview-questions/composition-api.md): 24개 질문, 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/vue-reactivity