0Pricing
Frontend Academy · 강의

디렉티브: v-if, v-for, v-bind, v-on

v-if와 v-show로 조건부 렌더링을 하고, v-for로 반복하며, v-bind로 속성을 동적으로 연결하고, v-on으로 DOM 이벤트를 수신합니다.

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

Vue 디렉티브란 무엇인가요

디렉티브는 v-로 시작하는 특수한 속성으로, Vue에 DOM 요소에서 특정 작업을 수행하도록 지시합니다. 디렉티브는 JavaScript 표현식으로 평가되며 반응형 데이터의 변경에 반응합니다.

v-if, v-else-if, v-else

v-if는 참으로 평가되는 표현식을 기준으로 요소를 조건부 렌더링합니다. 거짓이면 요소가 DOM에서 완전히 제거됩니다. v-else는 대체 콘텐츠를 제공합니다.

<div v-if="isLoggedIn">
  <UserDashboard />
</div>
<div v-else-if="isLoading">
  <Spinner />
</div>
<div v-else>
  <LoginForm />
</div>

v-show — 표시 전환

v-show는 DOM에 요소를 추가하거나 제거하는 대신 CSS display: none을 전환합니다. 요소의 표시 여부가 자주 바뀔 때는 v-show를 사용하고, 조건이 거의 바뀌지 않을 때는 v-if를 사용합니다.

<!-- Good for frequently toggling: -->
<div v-show="isDropdownOpen">...</div>

<!-- Good for rarely changing: -->
<div v-if="userHasPremium">...</div>

v-for — 목록 렌더링

v-for="item in items"은 각 항목에 대해 요소를 렌더링합니다. 안정적인 업데이트를 위해 항상 :key를 포함해야 합니다.

<ul>
  <li v-for="user in users" :key="user.id">
    {{ user.name }} — {{ user.email }}
  </li>
</ul>

<!-- With index: -->
<li v-for="(item, index) in items" :key="item.id">
  {{ index + 1 }}. {{ item.title }}
</li>

객체와 함께 사용하는 v-for

객체의 값이나 키-값 쌍을 순회합니다.

<dl>
  <template v-for="(value, key) in user" :key="key">
    <dt>{{ key }}</dt>
    <dd>{{ value }}</dd>
  </template>
</dl>

v-bind — 속성 바인딩

v-bind:attr 또는 단축형인 :attr은 HTML 속성을 반응형 값에 동적으로 연결합니다.

<img :src="user.avatar" :alt="user.name">
<a :href="getLink(post.id)">{{ post.title }}</a>
<button :disabled="isLoading" :class="{ active: isActive }">Save</button>

v-bind 객체 문법

객체를 사용하면 여러 속성을 한 번에 연결할 수 있습니다.

<input v-bind="{
  type: 'email',
  placeholder: 'Enter email',
  disabled: isSubmitting
}">

클래스 바인딩: :class

객체(키 = 클래스 이름, 값 = 조건)나 배열을 사용하여 CSS 클래스를 조건부로 연결합니다.

<div :class="{ 'is-active': isActive, 'has-error': hasError }">...</div>

<!-- Array syntax: -->
<div :class="[baseClass, isActive ? 'active' : '']">

<!-- Dynamic in script setup: -->
:class="{ card: true, [variantClass]: true }"

스타일 바인딩: :style

camelCase 객체를 사용하여 인라인 스타일을 연결합니다.

<div :style="{ backgroundColor: brandColor, padding: spacing + 'px' }">

v-on — 이벤트 수신

v-on:event 또는 단축형인 @event를 사용하여 이벤트 수신기를 연결합니다.

<button @click="handleClick">Click Me</button>
<input @input="value = $event.target.value">
<form @submit.prevent="handleSubmit">...</form>

이벤트 수식어

Vue는 기본 제공 이벤트 수식어를 제공합니다: .prevent (preventDefault), .stop (stopPropagation), .once (한 번만 실행), .self (대상이 요소 자체일 때만 실행), .passive (스크롤 성능 향상).

<form @submit.prevent="submit">
<button @click.stop="selectItem">
<div @click.self="closeModal">
<div @scroll.passive="onScroll">

빠른 확인

v-if 대신 v-show를 사용해야 하는 경우는 언제인가요?

복습: Vue 디렉티브

v-if는 DOM에서 요소를 제거하거나 추가합니다. v-show는 표시 여부를 전환합니다. v-for는 목록을 렌더링하며 항상 :key를 사용해야 합니다. v-bind(:)는 속성을 연결하고, :class와 :style도 연결합니다. v-on(@)은 이벤트 수신기를 연결합니다. 이벤트 수식어에는 .prevent, .stop, .once가 있습니다. v-model은 양방향 바인딩에 사용하며 v-bind:value와 v-on:input을 결합한 것입니다.

자주 묻는 질문

“디렉티브: v-if, v-for, v-bind, v-on” 강의는 무료인가요?

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

“디렉티브: v-if, v-for, v-bind, v-on”에서 뭘 배우나요?

v-if와 v-show로 조건부 렌더링을 하고, v-for로 반복하며, v-bind로 속성을 동적으로 연결하고, v-on으로 DOM 이벤트를 수신합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“디렉티브: v-if, v-for, v-bind, v-on” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

  1. Vue SFC: script, template, style
  2. Options API: data, methods, computed
  3. 디렉티브: v-if, v-for, v-bind, v-on
  4. 컴포넌트 Props와 Emits
← Frontend Academy(으)로 돌아가기