[Vue.js] 조건부 렌더링 v-if, v-show

📌 1. v-if

v-if 디렉티브는 조건부로 블록을 렌더링 할 때 사용된다.

<h1 v-if="visible">Hello Vue3!</h1>

위의 코드에서 visible이 true라면 "Hello Vue3!" 텍스트가 화면에 렌더링 될 것이고, false라면 렌더링 되지 않을 것이다.

조건에 따라 화면에 렌더링을 하게 해주는 것이 v-if이다.

v-else-if, v-else도 사용할 수 있다.
이름에서 알 수 있듯이 v-if에 대한 else if 블록이다.

여러 조건을 연결하여 사용할 수 있다.

<h1 v-if="type === 'A'">
  A
</h1>
<h1 v-else-if="type === 'B'">
  B
</h1>
<h1 v-else-if="type === 'C'">
  C
</h1>
<h1 v-else>
  Not A/B/C
</h1>

여러개의 HTML요소를 v-if디렉티브로 연결하고 싶다면 <template>를 사용할 수 있다.

<template v-if="visible">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

🚫 주의사항

v-if와 v-for를 함께 쓰는 것은 권장하지 않는다.
자세한 내용은 뷰의 공식 스타일 가이드 참고.

동일한 엘리먼트에 v-if와 v-for를 함께 사용할 때, v-if가 더 높은 우선순위를 갖는다.
자세한 내용은 리스트 렌더링 가이드를 참고.

---

📌 2. v-if 와 v-show

요소를 조건부로 표시하는 또 다른 옵션에 v-show가 있다.

<h1 v-show="show">Title</h1>
<button @click="show = !show">toggle show</button>

v-show 옵션을 사용해 텍스트 'Title'을 화면에서 보여줄지를 결정할 수 있다.

💡 v-if와의 차이점은 무엇일까?

v-if는 true일 때만 렌더링되고,
v-show는 항상 렌더링하며 이후 조건에 따라 css display:block/none으로 전환한다.

즉, 렌더링을 하냐 안하냐의 차이이다.

v-if는 실제로 렌더링 된다. 전환 할 때 블록 내부의 컴포넌트들이 제거되고 다시 생성되기 때문이다.
초기 렌더링 시, 조건이 거짓이면 렌더링 하지 않는다.

v-show는 조건에 관계없이 항상 렌더링 후, css 전환을 기반으로 한다.
조건이 거짓이어도 렌더링 한 후, css로 숨기는 것이다.

결과적으로, v-if는 전환 비용이 높은 반면, v-show는 초기 렌더링 비용이 높다.

무언가를 자주 전환해야 한다면 v-show를 사용하는게 좋고, 런타임 시 조건이 변경되지 않는다면 v-if를 사용하는게 더 낫다.

---

[참고문헌]

vue.js 기본편 - 짐코딩 인프런 강의 참조

---

v-if와 v-for를 같이 사용하지 않는 것이 좋다는 주의사항은 실무 중에 깨달았었다.
v-for로 테이블 행을 출력하는데 특정 조건의 행은 v-if로 숨기고 싶었다.
결과는 v-if가 더 높은 우선순위를 가져 실패했고, 옵션이 함께 쓰일 때 우선순위 규칙이 존재한다는 것을 배웠다.

이번 파트에서 그때 배웠던 것들이 나와있길래 주의사항을 강조하여 적었다.
이 주의사항은 가볍게 넘기지 않는 것이 좋다,,