Composition API
Setup function, ref, reactive, computed, watch, lifecycle hooks, composables, script setup
1Vue 3의 Composition API란 무엇인가요?
Vue 3의 Composition API란 무엇인가요?
답변
Composition API는 options(data, methods, computed) 대신 composition function을 사용하여 Vue 컴포넌트 로직을 구성하는 새로운 방식입니다. 옵션 종류별이 아니라 기능별로 로직을 묶을 수 있어 composable을 통한 코드 재사용이 쉬워집니다. 또한 더 나은 TypeScript 지원과 복잡한 컴포넌트에 대한 더 나은 구조화를 제공합니다.
2Composition API에서 컴포넌트의 로직을 정의하는 데 사용되는 주요 함수는 무엇인가요?
Composition API에서 컴포넌트의 로직을 정의하는 데 사용되는 주요 함수는 무엇인가요?
답변
setup() 함수는 Composition API의 진입점입니다. 컴포넌트가 생성되기 전, 심지어 created()보다도 먼저 실행됩니다. props와 context를 인자로 받으며, template에 노출할 데이터와 함수를 담은 객체를 반환해야 합니다. ref, reactive, computed, watch와 Composition API의 lifecycle hooks를 사용하는 곳이 바로 이 setup() 안입니다.
3ref()와 reactive()의 주요 차이점은 무엇인가요?
ref()와 reactive()의 주요 차이점은 무엇인가요?
답변
ref()는 primitive 값이나 객체에 대한 반응형 참조를 생성하며, script에서는 .value를 통해 접근합니다(다만 template에서는 자동으로 unwrap됩니다). reactive()는 객체와 배열에만 반응형 proxy를 생성하며 .value가 필요 없지만 구조 분해하면 반응성을 잃습니다. ref()는 primitive에 더 범용적이고, reactive()는 복잡한 객체에 더 자연스럽지만 구조 분해 시 toRef/toRefs가 필요합니다.
setup() 함수에서 ref의 값에 어떻게 접근하나요?
Composition API에서 computed 속성을 어떻게 만드나요?
+21 면접 질문