[Vue] 뷰 조건 처리 – v-if, v-else, v-else-if, v-show 완벽 정리

vue.js

Vue.js에서는 다양한 디렉티브를 사용해 조건에 따라 DOM 요소를 동적으로 렌더링할 수 있습니다. 이 기능은 사용자 인터페이스를 유연하게 제어하는 데 매우 유용합니다. 아래에서 Vue의 대표적인 조건 처리 방법과 각 특징을 정리합니다.

 

1. v-if

• 기본 개념:
  v-if 디렉티브는 주어진 조건이 참(truthy)일 때만 해당 요소를 렌더링합니다. 조건이 거짓이면 DOM에서 아예 제거됩니다.
• 사용 예시:
•  
•  
  text

  <template> <div> <p v-if="isVisible">이 문장은 보입니다.</p> <button @click="isVisible = !isVisible">Toggle Visibility</button> </div> </template> <script> export default { data() { return { isVisible: true }; } } </script>
• 특징:
  • 조건이 false면 요소와 그 하위 컴포넌트, 이벤트 리스너까지 모두 제거됨(게으른 렌더링)
  • 조건이 true로 바뀌면 새로 렌더링됨

2. v-else, v-else-if

• v-else:
  v-if 조건이 거짓일 때 렌더링되며, 반드시 v-if 또는 v-else-if 바로 뒤에 위치해야 합니다.

<p v-if="isVisible">이 문장은 보입니다.</p>
<p v-else>이 문장은 보이지 않습니다.</p>

• v-else-if:
  여러 조건 분기를 처리할 때 사용합니다. 마찬가지로 바로 앞에 v-if나 v-else-if가 있어야 합니다.

<div v-if="status === 'loading'">로딩 중...</div>
<div v-else-if="status === 'success'">성공적으로 로딩되었습니다!</div>
<div v-else>오류가 발생했습니다.</div>

3. <template>에서 v-if

• 여러 요소를 조건부로 묶어서 렌더링할 때 <template v-if="조건">을 사용할 수 있습니다.

<template v-if="isVisible">
  <p>이 문장은 보입니다.</p>
  <p>이 문장도 보입니다.</p>
</template>

• <template> 태그 자체는 렌더링되지 않고, 내부 요소만 조건에 따라 렌더링됩니다.

 

4. v-show

• 기본 개념:
  v-show는 조건에 따라 요소의 CSS display 속성만 토글합니다.
  조건이 false여도 요소는 DOM에 남아 있고, 단지 display: none으로 숨겨집니다.

<p v-show="isVisible">이 문장은 보입니다.</p>

 

• 특징:
  • 초기 렌더링 시 항상 DOM에 존재
  • 조건이 자주 바뀌는 경우에 적합
  • v-else, <template>과 함께 사용할 수 없음

 

5. v-if vs v-show – 언제 어떤 걸 쓸까?

구분v-ifv-show

렌더링	조건이 참일 때만 DOM에 추가	항상 DOM에 존재
성능	초기 렌더링 비용 낮음, 토글 비용 높음	초기 렌더링 비용 높음, 토글 비용 낮음
용도	자주 바뀌지 않는 조건	자주 바뀌는 조건
DOM 관리	요소/컴포넌트 완전 제거	CSS로 숨김

 

• 실무 팁:
  • 자주 토글되는 UI(탭, 드롭다운 등)는 v-show
  • 조건이 드물게 바뀌거나, 렌더링 비용이 큰 컴포넌트는 v-if 추천

 

6. v-if와 v-for의 조합

v-if와 v-for를 같은 요소에 동시에 쓰는 것은 권장되지 않습니다.

• 이유: 각 반복마다 조건을 평가하므로 성능 저하, 코드 가독성 저하
• 대안:
  • v-for로 먼저 필터링된 리스트를 만들고, 그 결과에만 렌더링
  • 또는 컨테이너 요소(ul, div 등)에 v-if를 적용

 

---

 

결론

Vue.js의 조건 처리 기능은 UI를 동적으로 구성하는 데 있어 매우 강력합니다.

• v-if, v-else, v-else-if, ``에서의 v-if, v-show 등 다양한 디렉티브를 상황에 맞게 조합하면 효율적이고 유연한 인터페이스를 만들 수 있습니다.

 

[Vue] 뷰 조건 처리

 

[Vue] 클래스와 스타일 바인딩 완벽 정리