vue: 조건부 렌더링 (v-if, v-show)

조건부논리를 상징하는 if구문 with chatGPT

Vue에서 조건부 렌더링을 위해 두 가지 주요 디렉티브인 v-if와 v-show를 사용할 수 있습니다. 두 디렉티브 모두 조건에 따라 요소를 표시하거나 숨기는데 사용되지만, 작동 방식에는 차이가 있습니다.

 

1.v-if

v-if는 조건이 true일 때만 해당 요소를 DOM에 추가합니다. 조건이 false이면 해당 요소가 DOM에서 제거됩니다.

• 장점: 필요하지 않은 경우 DOM에 요소를 아예 렌더링하지 않기 때문에 성능 면에서 유리할 수 있습니다.
• 단점: 조건이 자주 변경되면, 요소를 DOM에 추가/제거하는 비용이 발생하여 성능에 영향을 줄 수 있습니다.

<template>
  <div v-if="isVisible">이 요소는 isVisible이 true일 때만 표시됩니다.</div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true, //true, false로 변경 확인
    };
  },
};
</script>

 

2.v-show

v-show는 요소를 항상 DOM에 남겨두지만, 조건이 false일 경우 CSS의 display: none 을 사용하여 화면에 보이지 않도록 처리합니다.

• 장점: 요소가 DOM에 계속 남아있기 때문에, 조건이 자주 변경될 때 빠르게 표시/숨기기 할 수 있습니다.
• 단점: 조건이 false인 경우에도 해당 요소가 DOM에 남아 있기 때문에, 렌더링 비용이 발생할 수 있습니다.

<template>
  <div v-show="isVisible">이 요소는 isVisible이 true일 때만 표시됩니다.</div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true, //true, false로 변경 확인 
    };
  },
};
</script>

 

언제 v-if와 v-show를 사용할지

• v-if: 요소가 조건에 따라 자주 표시되거나 숨겨지지 않는 경우에 사용합니다. 예를 들어 페이지가 처음 로드될 때 특정  조건에 따라 요소를 한번만 표시할 지 결정할 때 유용합니다.
• v-show: 요소가 조건에 따라 자주 표시되거나 숨겨질 경우에 사용합니다. 예를 들어, 탭 기능에서 각 탭의 내용을 빠르게 표시/숨기는 경우 v-show가 적합합니다.