디렉티브와 조건부 렌더링

 디렉티브는 Vue에서 제공하는 특수 속성으로, HTML 요소에 특정 동작을 수행하도록 지시합니다. 디렉티브를 사용하여 조건부 렌더링을 구현하면 특정 조건에 따라 요소를 동적으로 표시하거나 숨길 수 있습니다.

1. v-if 디렉티브

v-if 디렉티브를 사용하여 요소를 조건부로 렌더링할 수 있습니다. v-if에 전달된 값이 true인 경우에만 해당 요소가 렌더링됩니다.

<p v-if="isShow">이 요소는 조건이 참일 때만 보입니다.</p>

isShow는 Vue 인스턴스의 데이터로, 조건에 따라 요소의 렌더링 상태가 결정됩니다.

2. v-else 디렉티브

v-else 디렉티브를 사용하여 v-if와 함께 사용하면, 앞선 v-if의 조건이 false인 경우에만 해당 요소가 렌더링됩니다.

<p v-if="isShow">조건이 참일 때 보입니다.</p>
<p v-else>조건이 거짓일 때 보입니다.</p>

v-else는 v-if와 바로 인접해 있어야 하며, 동일한 부모 요소 내에서 사용되어야 합니다.

3. v-show 디렉티브

v-show 디렉티브를 사용하여 요소를 조건부로 표시하거나 숨길 수 있습니다. v-show에 전달된 값이 true인 경우에는 요소가 화면에 표시되고, false인 경우에는 요소가 숨겨집니다.

<p v-show="isShow">이 요소는 조건이 참일 때만 보입니다.</p>

v-show는 요소를 실제로 숨기지만, DOM 구조는 그대로 유지됩니다. 따라서 v-show를 사용하면 요소가 자주 토글될 때 유용합니다.

디렉티브를 사용하여 조건부 렌더링을 구현하면 특정 조건에 따라 동적으로 화면을 조작할 수 있습니다. 이를 통해 사용자 인터랙션에 따라 요소를 보이거나 숨길 수 있습니다. 위에서 제시한 예제를 기반으로 실제 애플리케이션에 적용해 보세요.