조건부 렌더링
v-for 디렉티브를 통해 여러 component를 리스트로 보여주었습니다. 하지만 특정 조건에 따라 해당 component들이 보일 수도, 안보일 수도 있는 것을 조건부 렌더링이라고 하며 Vue에서 조건부 렌더링은 v-if와 v-show 디렉티브로 구현할 수 있습니다.
v-if
v-if는 조건에 해당하지 않다면 렌더링을 하지 않습니다. 즉 DOM에 추가되지 않게 됩니다. v-if는 화면에서 아예 삭제되는 것이므로 자주 변경되는 요소에서는 사용하지 않는 것이 좋습니다.
<div v-if="true">...</div>
<div v-else-if="true">...</div>
<div v-else="true">...</div>v-show
v-if 디렉티브와 결과는 같지만 동작하는 방식이 다릅니다. v-if는 조건이 성립되지; 않을 경우 태그 자체를 렌더링 하지 않지만 v-show는 조건에 해당할 경우 렌더링은 하지만 display: none처리를 합니다.
<div v-show="true">...</div>
<div v-else="true">...</div>v-if와 v-show 중 무엇을 사용해야 할까?
두 디렉티브 같은 효과를 갖게 되지만 state에 따라 변화의 빈도가 많다면 v-show를 사용하는 것이 브라우저의 렌더링 속도에 도움이 되기 때문입니다.
🎢