[vue 3] 05.조건문을 위한 v-if, v-show

이번 포스트에서는 vue에서 조건문을 처리하기 위한 directive에 대해서 살펴보자.

 

v-if 계열

 

v-if

v-if는 당연히 true/false를 나타내는 조건에 따라 블록의 렌더링을 결정하는 directive이다. 한번이라도 프로그램에서 조건문을 써본 경험이 있다면 별도의 설명이 필요 없을것 같다. v-if 와 함께 v-else-if, v-else도 역시 세트로 제공된다. 바로 활용 예를 살펴보자.

아래와 같이 0과 true 를 갖는 age와 isCat이 있다고 생각해보자.

<script>
  const { createApp, ref } = Vue;

  createApp({
    setup() {
      const age = ref(0);
      const isCat = ref(true);
      return {
        age,
        isCat,
      };
    },
  }).mount("#app");
</script>

이제 나이 즉 age를 기준으로 화면에 표시되는 값이 달라져야 하는 경우라면 아래와 같이 template을 작성할 수 있다.

<div>
    현재 나이는 {{age}} 이니까..
    <span v-if="age<8">미취학</span>
    <span v-else-if="age<19">미성년</span>
    <span v-else>성년</span>
    <br />
    <button @click="age ++">+</button>
</div>

이제 age값의 변화에 따라서 생성되는 DOM이 달라지는 것을 확인할 수 있다.

v-if와 v-else-if, v-else는 인접해서 등장해야 한다. 만일  v-else-if, v-else 사이에 다른 내용이 삽입되면 오류가 발생한다.

 

<template>

v-if 계열은 directive 이므로 단일한 element에 적용될 수 있다. 그런데 조건에 따라서 하나 이상의 element에 대한 rendering을 결정해야 하는 경우가 종종 발생한다.

이때 <div>나 <span> 등을 이용할 수 있지만 단순히 그룹핑을 위한 element를 사용하게 되므로 DOM 구조가 복잡해지게 될 수 있다. 이런 경우 <template>의 사용을 고려해볼 수 있다. <template>은 그룹핑에 사용될 수 있지만 나중에 DOM이 생성될 때는 사라지게 된다.

아래 코드는 isCat 여부에 따라서 <h3>와 <div>두 개의 element를 사용하는데 이 둘을 묶어주기 위해서 <template>이 사용되었다.

<div>
    <h1>반려 동물 정보</h1>
    <template v-if="isCat">
        <h3>고양이</h3>
        <div>야옹 야옹 한다.</div>
    </template>
    <template v-else>
        <h3>강아지</h3>
        <div>멍멍 한다.</div>
    </template>
    <button @click="isCat = !isCat">toggle</button>
</div>

isCat===true	isCat===false

 

v-show

 

v-if vs v-show

v-if와 유사하게 조건문에 사용되는 directive로 v-show가 있다. 화면에 표시되는 결과는 동일하지만 내용은 아래처럼 차이가 있으므로 잘 구분해두자.

	v-if	v-show
조건 불일치 시 렌더링 방식	렌더링하지 않음 - DOM에서 제거됨 주석으로 대체	display=none으로 처리 보이지 않아도 DOM에 남아있음
이에 따른 비용	토글 비용이 큼	초기 렌더링 비용이 큼
유용한 경우	자주 바뀌지 않을 때	자주 바뀔 때
기타		<template>이나 <v-else> 등을 사용할 수 없음

 

이 둘의 차이는 보여지지 않을 때 생성된 DOM을 살펴보면 명확히 알 수 있다.

<h1>v-if vs v-show</h1>
<div>
  <span>사용자의 나이는 {{age}}</span>
  <span v-if="age<0">[오류(v-if)]</span>
  <span v-show="age<0">[오류(v-show)]</span>
  <br />
  <button @click="age --">-</button>
</div>

만약 위와 같은 상황에서 age가 0 미만으로 떨어지면 생성되는 DOM은 아래와 같다.

즉 v-if는 애초에 요소를 그리지 않고 주석(<!--v-if-->로 처리하고 v-show는 그리기는 하는데 display-none을 적용해서 안보이게 하는 것이다. 따라서 렌더링 비용을 고려하여 자주 화면이 바뀌는 경우(그렸다가 지웠다가를 반복하는 경우)는 v-show를, 자주 변경되지 않는 경우는 v-if를 사용하는 것이 좋다.