v-if와 v-show의 차이

Vue.js를 사용하면, 디렉티브를 사용한 경험이 있으실 거에요.

요소를 조건에 따라 표시하거나 숨기는 디렉티브인 v-if와 v-show는 둘 다 비슷한 기능이라고 생각될 수 있겠지만, 렌더링 방식에서 차이가 있습니다. 그 차이점에 대해 알아봅시다.

 

---

1. v-if

v-if는 조건이 true일 때만 해당 요소를 DOM에 추가하고, false일 때는 DOM에서 제거해요.

사용자 인증 상태에 따라 요소를 렌더링하는 등 자주 변경되지 않는 조건에 적합합니다.

조건이 자주 변경될 경우, 성능이 떨어질 수 있어요. 요소가 추가되거나 제거될 때마다 렌더링 과정이 필요하기 때문입니다.

 

예를 들어 봅시다.

<template>
  <div>
    <button @click="isVisible = !isVisible">메시지 전환</button>
    <p v-if="isVisible">보이는 메시지</p>
    <p v-else>숨겨진 메시지</p>
    <p>isVisible: {{ isVisible }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: false,
    };
  },
};
</script>

위 코드에서 메시지 전환 버튼을 클릭하면, isVisible의 값이 변경되고, 그에 따라 첫 번째 <p>요소가 나타나거나 사라집니다.

또한, v-else를 사용하여, v-if의 조건이 false일 때 표시할 내용을 지정할 수 있어요.

 

결과

isVisible이 false일 때

 

isVisible이 true일 때

 

---

2. v-show

v-show는 조건과 관계없이 DOM에 요소를 항상 남겨두며, display: none 스타일을 통해 요소를 숨깁니다.

이는 자주 바뀌는 조건에 적합해요. 예를 들어, 자주 표시되거나 숨겨져야 하는 UI 요소에 사용합니다.

v-show는 DOM에 항상 존재하므로, 렌더링 시에 v-if보다 부담이 적어요. 단, CSS로 숨기기 때문에 화면에서 사라지는 것이지 DOM에는 계속 남아 있습니다.

 

예를 들어 봅시다.

<template>
  <div>
    <button @click="toggle">v-show 전환</button>
    <p v-show="isVisible">보이거나 숨겨지는 텍스트</p>
    <p>isVisible: {{ isVisible }}</p>
  </div>
</template>

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

위 코드에서 버튼을 클릭하면 isVisible이 true로 바뀌어 <p> 요소의 표시 여부가 변경됩니다.

 

결과

isVisible이 false일 때

 

isVisible이 true일 때

 

---

3. 상황에 따른 선택

v-if과 v-show는 상황에 따라서 맞는 선택을 하면 될 것 같아요.

조건에 따라 DOM에 요소를 추가 또는 제거는 v-if를, 조건에 따라 CSS(display: none)를 적용하여, 화면에 표시 또는 숨김은 v-show를 사용하면 됩니다.

 

---

4. 정리하며

지금까지 v-if과 v-show의 차이점에 대해 알아보았습니다.

적절한 상황에 알맞은 디렉티브를 사용하여 효율적인 코드를 개발하면 될 것 같아요.

 

참고

토끼는 개발개발 님의 [Vue.js] 조건부 렌더링 v-if, v-show

Let's Sunny 님의 (Vue.js) v-if 와 v-show 의 차이

PAPICO 님의 [개념잡기] v-if 와 v-show 의 차이