Vue Academy · 강의

Vue 매크로와 커뮤니티 제안

vue-macros 라이브러리와 실험적인 defineModel, defineOptions, setupSFC 제안을 다룹니다.

레슨 3/413개 단계

Vue 매크로와 커뮤니티 제안은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

script setup의 컴파일러 매크로

<script setup>에서 Vue는 컴파일러 매크로를 제공합니다. defineProps와 defineEmits 같은 함수는 런타임에 가져오는 것이 아니라 컴파일 시점에 처리됩니다. Vue 3.4 이상에서는 더 많은 매크로가 추가되었고, 커뮤니티의 vue-macros 프로젝트에서는 더 다양한 매크로를 실험하고 있습니다.

vue-macros: 실험의 장

vue-macros는 Vue 코어보다 앞서거나 코어의 범위를 넘어서는 실험적인 매크로를 제공하는 커뮤니티 라이브러리입니다. 성공적인 아이디어는 때때로 코어에 편입됩니다. defineModel도 안정화되기 전에 이곳에서 시작되었습니다.

// vite.config
import VueMacros from 'unplugin-vue-macros/vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [VueMacros({ plugins: { vue: vue() } })]
})

defineModel: 이전 방식

defineModel이 나오기 전에는 컴포넌트에 v-model을 구현하려면 modelValue props를 선언하고 update:modelValue 이벤트를 수동으로 발생시켜야 했습니다. 코드가 장황하고 오류가 발생하기 쉬운 방식이었습니다.

<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

function onInput(e) {
  emit('update:modelValue', e.target.value)
}
</script>

defineModel: Vue 3.4에서 안정화

defineModel은 Vue 3.4에서 안정화되었습니다. 이 함수는 props와 업데이트 이벤트에 자동으로 연결된 쓰기 가능한 ref를 반환합니다. 값을 읽으면 현재 값을 가져오고, 값을 대입하면 업데이트 이벤트가 발생합니다.

<script setup>
const model = defineModel()
// model.value reads modelValue
// model.value = x emits update:modelValue
</script>

<template>
  <input v-model="model" />
</template>

이름 지정 및 타입 지정 defineModel

defineModel은 이름이 지정된 모델(v-model:title)과 required 및 타입과 같은 옵션을 지원하며, defineProps와 같은 방식으로 사용할 수 있습니다.

<script setup>
const title = defineModel('title', { type: String, required: true })
const count = defineModel('count', { default: 0 })
</script>

여러 v-model을 간편하게 사용하기

이름이 지정된 모델을 사용하면 컴포넌트에서 여러 양방향 바인딩을 깔끔하게 노출할 수 있습니다. 이전에는 이를 위해 여러 개의 prop/emit 쌍이 필요했습니다.

<!-- parent -->
<UserForm v-model:name="name" v-model:email="email" />

<!-- UserForm script setup -->
<!-- const name = defineModel('name') -->
<!-- const email = defineModel('email') -->

defineOptions

Vue 3.3에서 안정화된 defineOptions를 사용하면 name과 inheritAttrs 같은 컴포넌트 옵션을 <script setup> 안에서 직접 설정할 수 있습니다. 따라서 두 번째 <script> 블록이 필요하지 않습니다.

<script setup>
defineOptions({
  name: 'UserCard',
  inheritAttrs: false
})
</script>

name과 inheritAttrs가 중요한 이유

컴포넌트의 name은 개발자 도구, 재귀 렌더링, <KeepAlive>의 include/exclude 설정에 도움이 됩니다. inheritAttrs: false로 설정하면 속성이 자동으로 전달되는 것을 막고, v-bind="$attrs"를 통해 특정 내부 요소에 attrs를 배치할 수 있습니다.

<script setup>
defineOptions({ inheritAttrs: false })
</script>

<template>
  <div class="wrapper">
    <input v-bind="$attrs" />
  </div>
</template>

주목할 만한 다른 매크로

Vue는 defineExpose(부모 ref에서 접근할 수 있는 항목 제어), defineSlots(슬롯 타입 지정), withDefaults(타입 기반 props의 기본값 설정)도 제공합니다. 이러한 매크로까지 알면 <script setup> 도구 모음을 더욱 완성도 높게 활용할 수 있습니다.

<script setup lang="ts">
const props = withDefaults(
  defineProps<{ size?: 'sm' | 'lg' }>(),
  { size: 'sm' }
)
defineExpose({ focus })
</script>

실험적 기능과 안정화된 기능, 신중하게 선택하기

코어의 안정화된 매크로(defineModel, defineOptions)는 프로덕션에서 안전하게 사용할 수 있습니다. vue-macros의 실험적 기능은 프로토타이핑과 조기 도입에 유용하지만 API가 변경될 수 있으므로, 실제 배포 앱에서는 사용을 신중하게 제한하십시오.

커뮤니티 제안 따라가기

새로운 아이디어는 RFC와 vue-macros에서 등장합니다. 이를 지켜보면 프레임워크가 나아갈 방향을 예상할 수 있고, 기능이 안정화되기 전에 의견을 전달할 수도 있습니다.

빠른 확인

Vue 매크로에 대한 이해도를 확인해 보십시오.

인터랙티브 레슨에서 답해보세요

요약

매크로와 제안에 대해 배운 내용입니다:

vue-macros에서 실험적인 매크로를 제공하며, 일부는 코어에 편입됩니다
defineModel(3.4에서 안정화)은 컴포넌트의 v-model을 간소화합니다
이름이 지정되고 타입이 지정된 모델을 사용하면 여러 양방향 바인딩을 깔끔하게 구성할 수 있습니다
defineOptions를 사용하면 <script setup>에서 name/inheritAttrs를 설정할 수 있습니다
프로덕션에서는 안정화된 매크로를 우선하고, 실험적 기능은 신중하게 다루십시오

무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 42
레슨: 156

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“Vue 매크로와 커뮤니티 제안” 강의는 무료인가요?

네 — “Vue 매크로와 커뮤니티 제안” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Vue 매크로와 커뮤니티 제안”에서 뭘 배우나요?

vue-macros 라이브러리와 실험적인 defineModel, defineOptions, setupSFC 제안을 다룹니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“Vue 매크로와 커뮤니티 제안” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Vue Academy(으)로 돌아가기