Vue 디렉티브 - (v-if, v-show)

Vue.js 데이터 바인딩: v-if vs v-show

Vue.js에서 조건부 렌더링을 위한 두 가지 주요 디렉티브인 v-if와 v-show에 대해 알아보겠습니다. 이 두 디렉티브는 비슷해 보이지만 각각 다른 동작 방식과 사용 시나리오를 가지고 있습니다.

기본 개념

Vue.js에서 조건부 렌더링은 데이터의 상태에 따라 DOM 요소를 보여주거나 숨기는 기능입니다. 이를 위해 v-if와 v-show 두 가지 디렉티브를 사용할 수 있습니다.

구현 예제

<!-- HTML -->
<div id="app">
  <!-- 1. v-if -->
  <h3>v-if</h3>
  <p v-if="isLogin">로그인 되었습니다.</p>
  <p v-else>로그인 하세요.</p>
  <button v-on:click="loginUser">로그인</button>

  <hr />

  <!-- 2. v-show -->
  <h3>v-show</h3>
  <p v-show="isLogin">로그인 되었습니다.</p>
  <button v-on:click="loginUser">로그인</button>
</div>

<!-- JavaScript -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  Vue.createApp({
    data() {
      return {
        isLogin: false,
      };
    },
    methods: {
      loginUser() {
        this.isLogin = !this.isLogin;
      },
    },
  }).mount("#app");
</script>

v-if vs v-show 비교

v-if의 특징

1. 조건부 렌더링: 조건이 true일 때만 DOM에 요소를 생성합니다.
2. DOM 조작: 조건이 false일 때는 요소를 완전히 DOM에서 제거합니다.
3. 성능: 자주 토글되는 경우 성능상 불리할 수 있습니다.
4. 초기 렌더링: 조건이 false인 요소는 초기에 렌더링되지 않습니다.

v-show의 특징

1. 조건부 표시: 조건과 관계없이 항상 DOM에 요소가 존재합니다.
2. CSS 조작: display: none을 통해 요소를 숨깁니다.
3. 성능: 자주 토글되는 경우 성능상 유리합니다.
4. 초기 렌더링: 모든 요소가 초기에 렌더링됩니다.

동작 원리

v-if 동작 과정

1. isLogin이 false일 때: <p>로그인 하세요.</p>만 DOM에 존재
2. 버튼 클릭 시 isLogin이 true로 변경
3. Vue가 DOM을 다시 렌더링하여 <p>로그인 되었습니다.</p>로 교체
4. 다시 버튼 클릭 시 <p>로그인 하세요.</p>로 다시 교체

v-show 동작 과정

1. isLogin이 false일 때: <p>로그인 되었습니다.</p>가 DOM에 존재하지만 display: none으로 숨겨짐
2. 버튼 클릭 시 isLogin이 true로 변경
3. Vue가 display: none을 제거하여 요소를 표시
4. 다시 버튼 클릭 시 display: none을 다시 적용하여 숨김

언제 어떤 것을 사용할까?

v-if를 사용해야 하는 경우

1. 초기 렌더링 성능이 중요한 경우: 조건이 false인 요소가 많을 때
2. 조건이 자주 변경되지 않는 경우: 토글이 드문 경우
3. 조건부 컴포넌트: 완전히 다른 컴포넌트를 보여줘야 할 때
4. 메모리 사용량이 중요한 경우: 숨겨진 요소도 메모리를 사용하지 않아야 할 때

v-show를 사용해야 하는 경우

1. 자주 토글되는 경우: 로그인 상태, 모달 창 등
2. 초기 렌더링 비용이 높은 경우: 복잡한 컴포넌트를 자주 토글할 때
3. CSS 전환이 필요한 경우: 애니메이션과 함께 사용할 때
4. 조건이 대부분 true인 경우: 가끔씩만 숨겨야 하는 경우

성능 비교

v-if의 성능 특성

// v-if는 DOM을 완전히 생성/제거
// 조건이 false일 때: DOM 요소 없음
// 조건이 true일 때: DOM 요소 생성
// 토글 시: DOM 조작 발생

v-show의 성능 특성

// v-show는 CSS display 속성만 변경
// 조건이 false일 때: DOM 요소 존재, display: none
// 조건이 true일 때: DOM 요소 존재, display: block
// 토글 시: CSS 속성만 변경

실무 적용 팁

1. 토글 빈도 고려: 자주 변경되는 요소는 v-show 사용
2. 초기 렌더링 고려: 페이지 로드 시 보이지 않을 요소는 v-if 사용
3. 복잡성 고려: 복잡한 컴포넌트는 v-show로 성능 최적화
4. 메모리 사용량 고려: 많은 요소를 조건부로 보여줄 때는 v-if 사용

추가 디렉티브

v-else

v-if와 함께 사용하여 조건이 false일 때 보여줄 내용을 지정합니다.

<p v-if="isLogin">로그인 되었습니다.</p>
<p v-else>로그인 하세요.</p>

v-else-if

여러 조건을 체이닝할 때 사용합니다.

<p v-if="status === 'loading'">로딩 중...</p>
<p v-else-if="status === 'success'">성공!</p>
<p v-else-if="status === 'error'">오류 발생</p>
<p v-else>기본 상태</p>

결론

v-if와 v-show는 각각 다른 사용 시나리오에 최적화되어 있습니다.

• v-if: 조건부 렌더링이 필요한 경우, 자주 변경되지 않는 경우
• v-show: 자주 토글되는 경우, 성능이 중요한 경우

실제 프로젝트에서는 토글 빈도, 초기 렌더링 비용, 메모리 사용량 등을 종합적으로 고려하여 적절한 디렉티브를 선택하는 것이 중요합니다.

---

참고 자료:

• Vue.js 공식 문서 - 조건부 렌더링
• Vue.js 공식 문서 - v-if vs v-show