[Vue.js] v-show와 v-if의 차이

v-show와 v-if의 차이

v-show와 v-if는 Vue.js에서 조건부 렌더링을 구현하는 데 사용되는 디렉티브입니다. v-show는 렌더링 비용이 높기 때문에 항상 렌더링되지만 CSS display 속성을 사용하여 숨길 수 있습니다. 반면에 v-if는 조건에 따라 렌더링 여부를 결정하며 렌더링 비용이 더 적게 듭니다. 그러나 전환 비용이 높기 때문에 상황에 따라 v-show를 사용하는 것이 더 효율적일 수도 있습니다. 또한, v-show는 항상 template 태그 내부에서 사용해야 하며 v-else와 함께 사용할 수 없습니다.

v-show와 v-if는 Vue.js에서 조건부 렌더링을 구현하는 데 사용되는 디렉티브입니다.

v-show는 렌더링 비용이 높기 때문에 항상 렌더링되지만 CSS display 속성을 사용하여 숨길 수 있습니다. 따라서 v-show는 초기 렌더링 비용이 낮아 자주 사용되는 경우가 많습니다.

반면에 v-if는 조건에 따라 렌더링 여부를 결정하며 렌더링 비용이 더 적게 듭니다. 그러나 전환 비용이 높기 때문에 상황에 따라 v-show를 사용하는 것이 더 효율적일 수도 있습니다.

v-show는 항상 template 태그 내부에서 사용해야 하며 v-else와 함께 사용할 수 없습니다.

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <h1 v-if="isIf">Using v-if</h1>
    <h1 v-show="!isIf">Using v-show</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isIf: true
    }
  },
  methods: {
    toggle() {
      this.isIf = !this.isIf
    }
  }
}
</script>

위 코드에서 v-if를 사용하는 h1 태그는 조건에 따라 렌더링이 결정되고, v-show를 사용하는 h1 태그는 항상 렌더링되지만 CSS display 속성을 사용하여 숨겨집니다.