[Vue.js] - Vue 조건문 v-if, v-show 사용법 및 차이점

#vue v-if 디렉티브

`v-if`는 Vue의 조건부 렌더링 디렉티브 중 하나입니다. 이 디렉티브를 사용하면 요소가 DOM에 렌더링 되거나 제거되는지 여부를 조건부로 결정할 수 있습니다.

`v-if` 디렉티브는 표현식을 평가하고 해당 결과에 따라 요소를 렌더링하거나 제거합니다. 표현식이 `true`로 평가되면 요소가 렌더링 되고, `false`로 평가되면 요소가 DOM에서 제거됩니다. `v-if`는 요소의 존재 여부를 동적으로 제어할 수 있어 필요에 따라 특정 조건에서만 요소를 렌더링 할 수 있습니다.

 

 

#vue v-show 디렉티브

`v-show`는 Vue의 조건부 렌더링 디렉티브 중 하나입니다. `v-if`와 달리 `v-show`는 요소를 숨기거나 표시하는 데 사용됩니다. `v-show`는 표현식을 평가하고 해당 결과에 따라 요소의 `display` CSS 속성을 토글합니다.

`v-show` 디렉티브는 `v-if`와 비교하여 렌더링 속도가 빠르다는 장점이 있습니다. `v-show`는 초기 렌더링 때 항상 요소를 렌더링하고, 그 후에 표현식을 평가하여 요소를 표시하거나 숨깁니다. 반면 `v-if`는 초기 렌더링 때 표현식을 평가하여 요소를 렌더링 하거나 제거합니다.

 

 

#vue v-if, v-show 차이점

`v-if`와 `v-show`는 Vue에서 조건부 렌더링을 수행하는 두 가지 디렉티브입니다. 그러나 그들 사이에는 몇 가지 중요한 차이점이 있습니다.

1. 초기 렌더링 시간:
   - `v-if`: 조건이 `true`일 때만 요소를 렌더링합니다. 조건이 `false`인 경우, 요소는 제거됩니다.
   - `v-show`: 조건과 상관없이 초기 렌더링 시 요소를 항상 렌더링 합니다. 다만, 조건이 `false`인 경우에는 CSS의 `display` 속성을 이용하여 요소를 숨깁니다.

2. 전환 비용:
   - `v-if`: 조건이 변경될 때마다 요소를 추가하거나 제거하는 전환 비용이 있습니다. 따라서 조건이 자주 변경되거나 렌더링 비용이 높은 경우에는 성능에 영향을 줄 수 있습니다.
   - `v-show`: 조건이 변경되어도 요소는 항상 렌더링되므로 전환 비용은 거의 없습니다. 따라서 조건이 자주 변경되는 경우에 유용합니다.

3. 초기 상태에서의 접근성:
   - `v-if`: 조건이 `false`일 때, 요소는 DOM에 존재하지 않으므로 스크린 리더 및 검색 엔진 등이 해당 요소를 인식하지 못합니다.
   - `v-show`: 조건이 `false`일 때, 요소는 DOM에 존재하지만 CSS의 `display` 속성을 이용하여 숨겨집니다. 따라서 스크린 리더 및 검색 엔진 등이 해당 요소를 인식할 수 있습니다.

4. 추가적인 요소:
   - `v-if`: 조건부로 렌더링되는 요소는 Vue의 라이프사이클 훅에 영향을 받습니다. 따라서 `v-if`로 렌더링된 요소가 다시 나타날 때마다 생성 및 소멸과 같은 초기화 작업이 다시 수행됩니다.
   - `v-show`: 조건부로 렌더링되는 요소는 Vue의 라이프사이클 훅에 영향을 받지 않습니다. 따라서 `v-show`로 렌더링된 요소는 숨겨진 상태에서도 계속 유지되며, 다시 나타날 때 초기화 작업을 수행하지 않습니다.

어떤 디렉티브를 사용할지는 상황과 요구사항에 따라 다릅니다. `v-if`는 조건이 자주 변경되지 않거나 렌더링 비용이 높은 요소에 적합하고, `v-show`는 조건이 자주 변경되는 경우나 초기 접근성이 중요한 요소에 적합합니다.

 

 

#Vue 조건문 v-if, v-show 사용법

 

-Vue.js 코드

1. if문은 조건값인 B에 맞게 B가 출력됩니다.

2. show문은 true일 경우 css의 display를 이용해서 화면에 보이게 되고, false일 경우 화면에서 숨기도록 처리가 됩니다.

<template>
    <div>
        <h1 v-if="ifTest=='A'">ifTestA</h1>
        <h1 v-else-if="ifTest=='B'">ifTestB</h1>
        <h1 v-else>ifTestC</h1>

        <h1 v-show="showTest">showTest</h1>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                ifTest: 'B',
                showTest: true
            };
        }
    }
</script>

 

-Vue 조건문 v-if, v-show 사용법 테스트