[Vue] 조건부 렌더링 v-if, v-else, v-else-if, v-show (v-if와 v-show의 차이점)

⚠️ 이 포스팅은 Vue3(한국어): 조건부 렌더링을 공부하고 정리한 블로그 포스팅입니다. ⚠️

 

---

 

v-if

v-if 디렉티브는 조건에 따라 요소를 렌더링할 때 사용한다. v-if="조건" 조건이 true면 해당 요소를 렌더링하고 false면 해당 요소를 렌더링 하지 않는다. 아래의 예제에서 awesome이라는 데이터가 true일경우만 h1 요소가 렌더링된다.

<h1 v-if="awesome">Vue is awesome!</h1>

예제

<template>
  <button @click="handler">Click Me</button>
  <h1 v-if="isShow">Hello</h1>
</template>

<script>
export default {
  data() {
    return {
      isShow: 'true',
    };
  },
  methods: {
    handler() {
      this.isShow = !this.isShow;
    },
  },
};
</script>

 

여러 요소에 조건문 한번에 설정해주기

부모태그로 요소를 감싸준 후 v-if 디렉티브를 부모태그에 넣어주면 조건에 만족하면 모든 자식 태그가 렌더링 된다.

<div v-if="조건">
  <h1>title</h1>
  <p>paragraph 1</p>
  <p>paragraph 2</p>
</div>

template

v-if 디렉티브를 넣기 위해 의미 없는 HTML 태그를 넣고 싶지 않다면 <template> 태그로 요소를 감싸주면 된다. template 태그는 v-if가 true일때 렌더링되지 않고 하위요소만 렌더링이 된다.

<template v-if="조건">
  <h1>title</h1>
  <p>paragraph 1</p>
  <p>paragraph 2</p>
</template>

단 최상위 template에는 v-if 디렉티브를 사용할 수 없다.

가능

<template>
  <button @click="handler">Click Me</button>
  <template v-if="isShow">
    <h1>title</h1>
    <p>paragraph 1</p>
    <p>paragraph 2</p>
  </template>
</template>

불가능

<template v-if="isShow">
  <button @click="handler">Click Me</button>
  <h1>title</h1>
  <p>paragraph 1</p>
  <p>paragraph 2</p>
</template>

예제

<template>
  <button @click="handler">Click Me</button>
  <template v-if="isShow">
    <h1>title</h1>
    <p>paragraph 1</p>
    <p>paragraph 2</p>
  </template>
</template>

<script>
export default {
  data() {
    return {
      isShow: 'true',
      count: 0,
    };
  },
  methods: {
    handler() {
      this.isShow = !this.isShow;
      this.count += 1;
    },
  },
};
</script>

 

v-else

v-if 디렉티브는 v-else와 함께 사용할 수도 있다. v-else 디렉티브를 가지고 있는 요소는 v-if의 조건이 false일때 실행된다. 아래의 예제에서 v-if의 데이터 awesome이 true면 v-if 디렉티브를 가지고 있는가 렌더링되고 v-else 디렉티브를 가지고 있는 요소는 렌더링되지 않는다. 반대로 v-if의 데이터 awesome이 false면 v-if 디렉티브를 가지고 있는 요소가 렌더링되지 않고 v-else 디렉티브를 가지고 있는 요소만 렌더링된다.

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Vue is not awesome!</h1>

 이 두개의 디렉티브를 가지는 요소는 서로 붙어 있어야한다 (다른 요소가 중간에 있으면 작동하지 않는다)

<h1 v-if="awesome">Vue is awesome!</h1>
<p>hehe</p>
<h1 v-else>Vue is not awesome!</h1>

예제

<template>
  <button @click="handler">Click Me</button>
  <h1 v-if="isShow">Hello</h1>
  <h1 v-else>Bye</h1>
</template>

<script>
export default {
  data() {
    return {
      isShow: 'true',
    };
  },
  methods: {
    handler() {
      this.isShow = !this.isShow;
    },
  },
};
</script>

 

v-else-if

자바스크립트 if, else if, else 구문과 마찬가지로 if의 조건문이 충족되지 않았을대 사용할 수 있다. else는 else if가 모두 false일때 실행된다.

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else-if>Vue is wholesome!</h1>
<h1 v-else>Vue is not awesome!</h1>

예제

<template>
  <button @click="handler">Click Me</button>
  <p>Count: {{ count }}</p>
  <h1 v-if="isShow">Hello</h1>
  <h1 v-else-if="count > 3">Count > 3</h1>
  <h1 v-else>Bye</h1>
</template>

<script>
export default {
  data() {
    return {
      isShow: 'true',
      count: 0,
    };
  },
  methods: {
    handler() {
      this.isShow = !this.isShow;
      this.count += 1;
    },
  },
};
</script>

 

v-if vs v-show

v-if와 v-show가 false일때 요소가 화면에 출력되지 않는 공통점이 있다. 차이점은 아래와 같다:

v-if

<template v-if="조건">
  <h1>title</h1>
  <p>paragraph 1</p>
  <p>paragraph 2</p>
</template>

• v-if가 true일때: 해당 요소를 렌더링한다 (요소를 만든다)
• v-if가 false일때: 해당 요소를 렌더링하지 않는다 (요소를 만들지 않는다)
• 요소가 여러개일 경우 렌더링 되지 않는 HTML 태그 template에 v-if 디렉티브를 사용할 수 있다
• 조건에 따라 해당 요소 렌더링 여부가 결정되기 때문에 전환비용이 높다
• 런타임시 조건이 변경되지 않을 경우 사용을 권장한다

v-show

<div v-show="조건">
  <h1>title</h1>
  <p>paragraph 1</p>
  <p>paragraph 2</p>
</div>

• v-show가 true일때: 해당 요소를 렌더링한다 (요소를 만든다)
• v-show가 false일때: 해당 요소를 렌더링한다 (요소를 만든다), 요소를 화면에 출력하지 않기 위해 display: none을 적용한다
• template 태그 안에서 사용할 수 없다
• v-else와 함께 사용할 수 없다
• 조건에 상관없이 해당 요소를 렌더링하기 때문에 초기 렌더링 비용이 높다
• 자주 조건을 전환해야 할때 사용을 권장한다

→ 조건에 따라 요소를 토글링하고 싶을때 v-if 디렉티브를 먼저 사용해주고 자주 조건을 전환해야한다고 판단이 되면 v-show로 바꿔준다!