Vue_4 (v-if vs v-show)

v-if와 v-show는 Vue에서 조건부 렌더링을 위해 사용되는 디렉티브임

 

두 가지 모두 요소를 조건에 따라 보여주거나 숨기는 데 사용되지만, 작동 방식에 중요한 차이가 있음

 

<template>
  <div>
    <h2>사용자 프로필</h2>
    <div v-if="isLoggedIn">
      <p>환영합니다, {{ username }}님!</p>
      <button @click="logout">로그아웃</button>
    </div>
    <div v-else>
      <p>로그인이 필요합니다.</p>
      <button @click="login">로그인</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      username: ''
    }
  },
  methods: {
    login() {
      // 로그인 로직
      this.isLoggedIn = true;
      this.username = '홍길동';
    },
    logout() {
      // 로그아웃 로직
      this.isLoggedIn = false;
      this.username = '';
    }
  }
}
</script>

 

v-if:

• 조건이 false일 때 요소를 DOM에서 완전히 제거
• 조건이 변경될 때 요소를 생성하거나 제거하므로, 초기 렌더링 비용이 낮지만 토글 비용이 높음
• 자주 변경되지 않는 조건에 적합

v-show:

• 조건에 관계없이 항상 요소를 렌더링하고, CSS의 display 속성을 사용하여 보이거나 숨김
• 초기 렌더링 비용이 v-if보다 높지만, 토글 비용이 매우 낮음
• 자주 토글되는 요소에 적합

위의 코드 예제에서:

• v-if를 사용한 요소는 조건이 false일 때 DOM에서 완전히 제거됨
• v-show를 사용한 요소는 항상 DOM에 존재하며, 조건이 false일 때 display: none 스타일이 적용됨

사용 시 고려사항:

1. 렌더링 빈도: 자주 토글되는 요소는 v-show가 더 효율적
2. 초기 로딩 성능: 처음에 보이지 않아야 하는 큰 컴포넌트는 v-if가 더 좋음
3. v-if는 조건이 false일 때 요소를 완전히 제거하므로 SEO에 영향을 줄 수 있음

프로젝트의 요구사항과 성능 특성에 따라 v-if와 v-show를 적절히 선택하여 사용하면 됨

 

 

 

 

v-if 사용 예:

<template>
  <div>
    <h2>사용자 프로필</h2>
    <div v-if="isLoggedIn">
      <p>환영합니다, {{ username }}님!</p>
      <button @click="logout">로그아웃</button>
    </div>
    <div v-else>
      <p>로그인이 필요합니다.</p>
      <button @click="login">로그인</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      username: ''
    }
  },
  methods: {
    login() {
      // 로그인 로직
      this.isLoggedIn = true;
      this.username = '홍길동';
    },
    logout() {
      // 로그아웃 로직
      this.isLoggedIn = false;
      this.username = '';
    }
  }
}
</script>

 

• 로그인 상태는 자주 바뀌지 않음
• 로그인하지 않은 사용자에게는 개인 정보가 보이지 않아야 함
• 로그인/로그아웃 시 DOM 구조가 크게 변경됨

 

 

<template>
  <div>
    <h2>할 일 목록</h2>
    <button @click="toggleCompletedTasks">
      {{ showCompleted ? '완료된 항목 숨기기' : '완료된 항목 보기' }}
    </button>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        {{ task.title }}
        <span v-show="showCompleted && task.completed">(완료)</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showCompleted: true,
      tasks: [
        { id: 1, title: '우유 사기', completed: false },
        { id: 2, title: '책 읽기', completed: true },
        { id: 3, title: '운동하기', completed: false },
        { id: 4, title: '코딩 공부', completed: true }
      ]
    }
  },
  methods: {
    toggleCompletedTasks() {
      this.showCompleted = !this.showCompleted;
    }
  }
}
</script>

 

• 완료된 항목 표시는 자주 토글될 수 있음
• 모든 할 일 항목은 항상 DOM에 존재해야 함 (예: 검색 기능을 위해).
• 토글 시 DOM 구조의 변경이 크지 않음 (단순히 '(완료)' 텍스트만 보이거나 숨겨짐)

 

 

∴

- v-if는 조건이 자주 변경되지 않고, 조건에 따라 완전히 다른 내용을 보여줄 때

- v-show는 조건이 자주 변경되고, 토글되는 내용의 구조가 비슷할 때

 

프로젝트 특성과 요구사항에 따라 적절한 디렉티브 선택하면 성능과 ux 최적화 가능