[Vue.js] v-if 지시문 활용: 조건부 렌더링 구현 가이드

 

Vue.js에서 v-if 지시문은 조건에 따라 요소의 렌더링 여부를 결정하는 데 사용됩니다. 이는 특정 데이터 값에 따라 UI를 동적으로 변경해야 하는 상황에서 매우 유용한 기능입니다.

이 블로그 게시물에서는 v-if 지시문의 작동 방식, 다양한 활용 예시, 실제 코드 작성 방법, 그리고 주의 사항에 대해 자세히 살펴보겠습니다.

1. v-if 지시문 개요

v-if 지시문은 다음과 같은 구조로 사용됩니다.

HTML

<div v-if="조건">
  </div>

 

위 예제에서 조건이 참이면 div 요소와 그 안에 있는 모든 요소들이 렌더링됩니다. 반대로 조건이 거짓이면 요소들은 렌더링되지 않습니다.

예시:

HTML

<p v-if="isLoggedIn">로그인되었습니다.</p>
<p v-if="isAdmin">관리자입니다.</p>

 

 

2. v-if 지시문 활용 예시

다음은 v-if 지시문을 활용하는 몇 가지 예시입니다.

예제 1: 로그인 여부에 따라 메시지 표시

HTML

<div v-if="isLoggedIn">
  환영합니다, {{ user.name }}!
</div>

<div v-else>
  로그인이 필요합니다.
</div>

 

 

예제 2: 데이터 값에 따라 버튼 활성화/비활성화

HTML

<button v-if="item.stock > 0" :disabled="item.stock === 0">
  구매하기
</button>

 

 

예제 3: 조건부 리스트 항목 렌더링

HTML

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
    <button v-if="item.isInStock" @click="buyItem(item)">구매</button>
  </li>
</ul>

 

 

3. v-if 지시문 사용 방법

v-if 지시문은 다음과 같은 방식으로 사용할 수 있습니다.

• 조건식 사용: v-if 지시문 뒤에 조건식을 직접 작성할 수 있습니다. 조건식은 JavaScript 표현식이 될 수 있으며, true 또는 false 값을 반환해야 합니다.
• JavaScript 메서드 사용: 조건식 대신 JavaScript 메서드를 호출하여 v-if 지시문의 조건을 결정할 수 있습니다. 메서드는 true 또는 false 값을 반환해야 합니다.
• 템플릿 변수 사용: 템플릿 변수를 사용하여 v-if 지시문의 조건을 결정할 수 있습니다. 변수는 true 또는 false 값을 가질 수 있습니다.

4. v-if 지시문 주의 사항

• v-if 지시문은 요소의 렌더링 여부만 제어하며, 요소의 내용은 변경하지 않습니다.
• v-if 지시문을 사용할 때는 성능 최적화를 위해 조건식을 간결하게 작성하고 불필요한 계산을 피해야 합니다.
• v-else 지시문을 사용하여 조건이 거짓일 때 표시할 내용을 정의할 수 있습니다.