Vue에서의 v-show 디렉티브

조건부 렌더링의 또 다른 옵션은 디렉티브 v-show입니다. 사용법은 매우 유사합니다:

<template>
	<p v-show="isAuth">
		+++
	</p>
</template>

차이점은, v-show가 적용된 요소는 항상 렌더링되어 DOM에 남아있으며, 전환되는 것은 오직 그의 CSS 속성 display뿐이라는 점입니다.

디렉티브 v-if는 "진정한" 조건부 렌더링을 수행합니다. 조건이 전환될 때 블록 내부의 이벤트 리스너와 자식 컴포넌트들이 적절하게 파괴되고 재생성되기 때문입니다.

디렉티브 v-if는 또한 게으릅니다(lazy): 초기 렌더링 시점에 조건이 거짓이라면, 아무것도 하지 않을 것입니다 - 조건부 블록은 조건이 참이 될 때까지 렌더링되지 않습니다.

이에 비해, v-show는 훨씬 더 단순합니다 - 요소는 초기 상태에 관계없이 항상 렌더링되며, CSS 기반으로 전환됩니다.

일반적으로, v-if는 전환 비용이 더 높지만, v-show는 초기 렌더링 비용이 더 큽니다. 따라서 자주 전환된다면 v-show를 사용하고, 실행 중에 조건이 변경되지 않을 수 있다면 v-if를 선호하세요.

디렉티브 v-show는 template 요소에 사용할 수 없으며 v-else와 함께 작동하지 않습니다.

단락과 버튼이 주어졌습니다. 버튼을 클릭할 때 단락이 토글되도록 만드세요.

디렉티브 v-show와 v-if의 차이점을 설명하세요.

언제 디렉티브 v-show를 사용하는 것이 더 좋고, 언제 v-if를 사용하는 것이 더 좋은지 설명하세요.

디렉티브 v-show가 가진 제한 사항을 설명하세요.