v-bind 동적 바인딩과 다중 바인딩
동적 속성 이름 :[dynamicAttr], v-bind 객체 구문, 여러 속성을 한 번에 바인딩하는 방법을 다룹니다.
v-bind 동적 바인딩과 다중 바인딩은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
속성을 동적으로 바인딩하기
v-bind 디렉티브(단축 표기 :)는 HTML 속성을 반응형 값에 연결합니다. 동적 클래스와 스타일뿐 아니라 동적으로 이름을 정하는 속성에도 사용됩니다.
기본 v-bind
어떤 속성이든 표현식에 바인딩할 수 있습니다. 값이 변경되면 Vue가 속성을 업데이트합니다.
<img :src="imageUrl" :alt="description" />클래스 바인딩: 객체 문법
클래스에 객체 문법을 사용하면 참으로 평가되는 값에 따라 클래스가 전환됩니다. 키는 클래스 이름이고 값은 해당 클래스의 적용 여부를 결정합니다.
<div :class="{ active: isActive, disabled: isDisabled }"></div>클래스 바인딩: 배열 문법
배열 문법은 여러 클래스의 목록을 적용합니다. 정적 문자열과 반응형 변수를 섞거나, 조건부 항목을 위해 객체를 중첩할 수 있습니다.
<div :class="[baseClass, isActive ? activeClass : '']"></div>배열과 객체 조합하기
배열 안에 객체 형식을 중첩하면 두 문법의 장점을 모두 활용할 수 있습니다. 항상 적용되는 클래스와 조건부 클래스를 함께 사용할 수 있습니다.
<div :class="[baseClass, { active: isActive }]"></div>스타일 바인딩: 객체 문법
객체를 사용해 인라인 스타일을 바인딩할 수 있습니다. 속성 이름에는 camelCase를 사용하거나 따옴표 안에서 케밥 표기법을 사용하세요. 값은 반응형일 수 있습니다.
<div :style="{ color: textColor, fontSize: size + 'px' }"></div>스타일 바인딩: 객체 배열
여러 스타일 소스를 병합하려면 스타일 객체의 배열을 전달하세요. 예를 들어 기본 스타일과 테마 재정의를 함께 사용할 수 있습니다.
<div :style="[baseStyles, overrideStyles]"></div>여러 속성을 한 번에 바인딩하기
인자 없이 사용하는 v-bind는 속성 객체 전체를 요소에 펼쳐 적용합니다. 각 키가 하나의 속성이 됩니다.
<script setup>
const attrs = { id: 'main', class: 'box', 'data-role': 'panel' }
</script>
<template>
<div v-bind="attrs"></div>
</template>동적 속성 이름
대괄호를 사용하면 실행 시점에 속성 이름 자체를 계산할 수 있습니다. 대괄호 안의 표현식이 평가된 후 속성 키로 사용됩니다.
<script setup>
const attrName = 'title'
const attrValue = 'Hello'
</script>
<template>
<div :[attrName]="attrValue"></div>
</template>각 문법을 사용하는 경우
- 객체 클래스 문법 — 조건에 따라 여러 클래스를 전환할 때 사용합니다.
- 배열 클래스 문법 — 기본 클래스와 조건부 클래스를 결합할 때 사용합니다.
v-bind="obj"— 전체 속성 집합을 전달할 때 사용합니다.- 동적 이름
:[name]— 속성 키가 실행 시점에 결정될 때 사용합니다.
종합 예제
이 요소는 동적 클래스, 동적 스타일, 속성 펼치기를 모두 함께 사용하며, 모든 값이 반응형으로 동작합니다.
<div
:class="[base, { active: isActive }]"
:style="{ color: textColor }"
v-bind="extraAttrs"
></div>빠른 확인
v-bind에 대한 이해도를 확인해 보세요.
복습
v-bind의 다양한 활용법을 배웠습니다.
- 객체 클래스 문법은 조건에 따라 클래스를 전환하고, 배열 문법은 여러 클래스를 결합합니다.
- 스타일 바인딩에는 객체(camelCase) 또는 객체 배열을 사용합니다.
v-bind="obj"는 객체의 모든 속성을 펼쳐 적용합니다.:[name]="val"은 이름이 동적인 속성을 바인딩합니다.
자주 묻는 질문
“v-bind 동적 바인딩과 다중 바인딩” 강의는 무료인가요?
네 — “v-bind 동적 바인딩과 다중 바인딩” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“v-bind 동적 바인딩과 다중 바인딩”에서 뭘 배우나요?
동적 속성 이름 :[dynamicAttr], v-bind 객체 구문, 여러 속성을 한 번에 바인딩하는 방법을 다룹니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Vue Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“v-bind 동적 바인딩과 다중 바인딩” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- v-model: 양방향 바인딩의 내부 동작
- v-on 이벤트 수식어
- v-bind 동적 바인딩과 다중 바인딩
- 사용자 지정 디렉티브 작성