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
가 더 높은 우선순위를 갖는다.
자세한 내용은 리스트 렌더링 가이드를 참고.
요소를 조건부로 표시하는 또 다른 옵션에 v-show
가 있다.
<h1 v-show="show">Title</h1>
<button @click="show = !show">toggle show</button>
v-show
옵션을 사용해 텍스트 'Title'을 화면에서 보여줄지를 결정할 수 있다.
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가 더 높은 우선순위를 가져 실패했고, 옵션이 함께 쓰일 때 우선순위 규칙이 존재한다는 것을 배웠다.
이번 파트에서 그때 배웠던 것들이 나와있길래 주의사항을 강조하여 적었다.
이 주의사항은 가볍게 넘기지 않는 것이 좋다,,
많은 도움이 되었습니다, 감사합니다.