Vue 조건부 렌더링 v-if

조건부 렌더링 (v-if)

태그에 v-if를 같이 사용하며 표현식이 true 값을 반환할 때만 렌더링 됩니다.

 

⭐️ 예)

<div class="tab-content" v-if="tabAct == 0"></div>

 

   - 예를 들어, 이 요소는 특정 탭이 활성화될 때만 보이도록 설정되었습니다.

   - `v-if` 디렉티브는 특정 조건에 따라 HTML 요소를 화면에 표시할지 여부를 결정하는 데 사용됩니다.
   - 여기서는 `v-if="tabAct == 0"`으로 설정해서 `tabAct`라는 변수의 값이 0일 때만 `div.tab-content` 요소가 렌더링됩니다.

⭐️ 특징

v-if는 필요할 때만 요소를 생성합니다. 조건이 true일 때만 DOM에 요소가 추가되고, false일 때는 DOM에서 완전히 제거됩니다. 

 

⭐️ v-show와의 차이점
  v-show는 조건에 따라 요소를 숨기거나 표시만 하고 DOM에서 제거하지는 않습니.

빈도가 낮은 조건에는 `v-if`가 적합하고, 자주 전환해야 하는 경우에는 `v-show`가 더 효율적입니다.

 

⭐️ v-if와 v-else-if, v-else 예시

<div v-if="tabAct === 0">탭 0 내용</div>
<div v-else-if="tabAct === 1">탭 1 내용</div>
<div v-else>다른 탭 내용</div>

 

• tabAct의 값에 따라 한 번에 하나의 블록만 렌더링됩니다.
• tabAct가 0이면 첫 번째 div가 렌더링되고, 1이면 두 번째 div가, 그 외 값이면 세 번째 div가 렌더링됩니다.

⭐️ v-if와 v-show의 차이 예시

<div v-if="isVisible">이 요소는 `v-if`로 표시됩니다.</div>
<div v-show="isVisible">이 요소는 `v-show`로 표시됩니다.</div>

• v-if는 isVisible이 true일 때만 요소를 DOM에 추가하며, false일 때는 DOM에서 완전히 삭제합니다.
• v-show는 isVisible이 true일 때는 요소를 보이게 하고, false일 때는 CSS를 사용해 숨기기만 합니다 (display: none).

⭐️ 사용예시

//v-if 예시: 특정 조건에서만 필요한 무거운 컴포넌트나 요소를 로드할 때 사용됩니다. 
예를 들어, 사용자 정보가 필요할 때만 사용자 프로필을 렌더링하는 경우:
<div v-if="isLoggedIn">
  <UserProfile :user="currentUser" />
</div>

//v-show 예시: 클릭이나 탭으로 자주 전환되는 UI
예를 들어 자주 켜고 끌 수 있는 팝업창이나 FAQ의 세부 답변 등에는 v-show가 유리합니다.
<button @click="isAnswerVisible = !isAnswerVisible">답변 보기</button>
<div v-show="isAnswerVisible">여기 답변이 있습니다!</div>

 

이렇듯 상황에 따라 알맞는 디렉티브를 사용하면 더 효율적입니다.