Vue(version 3) 주요 기능 정리(v-if, v-show) #2

이번에는 v-if와 v-show를 기능을 소개하겠습니다.

코딩을 해본 사람들은 이 기능에 익숙할 것으로 보입니다.
이 기능은 해당 컴포넌트나, Element 를 보이거나 숨길 경우 사용합니다.

<template>

  <!-- 조건자 -->

  <div v-if="isShow === true"></div>

  <div v-else></div>

  <!-- 메소드 -->

  <div v-if="ShowElement()"></div>

  <div v-else-if="CalcUserView"></div>

  <div v-else></div>

  <!-- 반응형 변수 -->

  <user-view v-if="CalcUserView" />

  <user-view v-show="CalcUserView" />

</template>

<script setup lang="ts">

const isShow = ref<boolean>(false)

let isUserView: boolean = false

const ShowElement = (): boolean => {

  return isShow.value

}

const CalcUserView = computed((): boolean => {

  return isUserView

})

</script>

위 처럼 조건자, 메소드, 반응형 변수에 사용이 가능합니다.
메소드로 지정되어 있으면, 최초 랜더링 될 때, 한번 체크를 하고,
조건자가 반응형 변수이거나 computed를 사용할 경우 변수가 변경되었을 때, 바로 반영이 됩니다.

v-if와 v-show의 차이점
v-if 는 최초 랜더링 할 때, 그릴수도 있고, 안그릴수도 있지만,
v-show 는 최초 랜더링 시 그려놓고, 숨김처리를 한 로직이다.

이 부분이 중요한게 미리 그리는 것과 나중에 그리는 것은 성능에서 큰 차이가 나기 때문에,
잘 구별해서 사용해야 한다.

그리고 vue파일 하나당 생명주기(life-cycle)가 존재하기 때문에,
v-if로 최초 랜더링 시 그리지 않으면 생명주기가 동작하지 않고,
v-show는 최초 랜더링 시 생명주기가 동작한다.

그래서 컴포넌트를 복잡하게 사용할 경우 2가지의 특징을 잘 따져보고 개발해야 한다.