v-if는 Vue.js에서 조건부 렌더링을 구현하는 디렉티브입니다. 특정 조건이 true일 때 해당 DOM 요소를 렌더링하고, 조건이 false일 때 해당 요소를 DOM에서 완전히 제거합니다. 즉, 조건에 따라 HTML 요소가 존재하거나 존재하지 않게 동적으로 처리할 수 있습니다.
주요 특징:
- 조건부 렌더링: 조건에 따라 DOM 요소를 렌더링하거나 제거합니다.
- DOM 완전 제거: 조건이
false일 때 해당 요소는 DOM에서 완전히 제거됩니다. - v-else 및 v-else-if와 함께 사용 가능:
v-if와 함께v-else및v-else-if를 사용하여 다중 조건을 처리할 수 있습니다.
사용 예시:
기본 사용:
<p v-if="isLoggedIn">로그인되었습니다!</p>
위 코드에서 isLoggedIn 데이터가 true일 경우, "로그인되었습니다!"라는 문장이 화면에 표시됩니다. isLoggedIn이 false일 경우, <p> 태그와 내용은 DOM에서 제거됩니다.
v-else와 함께 사용:
<p v-if="isLoggedIn">로그인되었습니다!</p>
<p v-else>로그인이 필요합니다.</p>
위 코드는 isLoggedIn이 true일 때는 "로그인되었습니다!"가, false일 때는 "로그인이 필요합니다."가 표시됩니다.
v-else-if와 함께 다중 조건 처리:
<p v-if="isAdmin">관리자입니다.</p>
<p v-else-if="isLoggedIn">로그인되었습니다.</p>
<p v-else>로그인이 필요합니다.</p>
위 코드에서는 isAdmin이 true일 때 "관리자입니다."가 표시되고, isAdmin이 false지만 isLoggedIn이 true일 경우 "로그인되었습니다."가 표시됩니다. 둘 다 false일 경우에는 "로그인이 필요합니다."가 표시됩니다.
v-if와 v-show의 차이점:
v-if와 비슷한 디렉티브로 v-show가 있지만, 두 디렉티브는 동작 방식에 차이가 있습니다.
v-if: 조건이false일 때 해당 요소를 DOM에서 완전히 제거합니다. 조건이true일 때만 다시 DOM에 추가합니다. 따라서v-if는 요소를 빈번하게 추가하거나 제거해야 하는 경우에는 성능에 부담이 될 수 있습니다.v-show: 조건에 따라 요소의display속성을 변경하여 화면에서 보이거나 숨깁니다. 요소가 숨겨져도 DOM에서는 그대로 유지됩니다.
v-if와 v-for 사용 시 주의사항:
v-if와 v-for를 함께 사용하면 복잡한 로직으로 이어질 수 있어, 주의해야 합니다. 일반적으로 v-for이 v-if보다 우선순위가 높기 때문에, v-for로 먼저 반복을 수행한 뒤 조건을 확인하게 됩니다.
<ul>
<li v-for="item in items" v-if="item.isActive">{{ item.name }}</li>
</ul>
이 코드에서는 items 배열의 각 요소를 반복하지만, 각 요소의 isActive 값이 true일 경우에만 렌더링됩니다.
요약
v-if는 조건에 따라 DOM 요소를 추가하거나 제거하는 조건부 렌더링 디렉티브입니다.v-else,v-else-if와 함께 사용하여 다중 조건 처리가 가능합니다.- DOM 요소의 추가/제거가 빈번하게 발생하는 경우 성능에 주의해야 하며, 단순히 표시만 제어하려면
v-show를 사용하는 것이 좋습니다.
넙-죽