프론트엔드 연구소
close
프로필 배경
프로필 로고

프론트엔드 연구소

  • 분류 전체보기 (360)
    • Develop (282)
      • JavaScript (80)
      • Vue (31)
      • Nuxt (9)
      • React (22)
      • Next.js (8)
      • CSS (12)
      • TypeScript (5)
      • 자료구조 & 알고리즘 (4)
      • Java (37)
      • DataBase (19)
      • C (9)
      • Git (3)
      • etc (19)
      • Made by powerku (8)
    • 일상 (77)
      • 맛집 (26)
      • 리뷰 (17)
      • 재테크 (7)
      • 이야기 (17)
      • 블로그 (9)
  • 홈
  • JavaScript
  • Vue
  • Nuxt
  • React
  • Next.js
  • 방명록
반응형
v-if 와 v-show 성능 차이점

v-if 와 v-show 성능 차이점

Vue에서 v-if와 v-show 디렉티브가 있습니다. 디렉티브란 라이브러리에서 DOM 엘리먼트가 무언가를 수행하도록 지시하는 특수한 속성입니다. v-if v-show 공통점 두 가지 모두 조건에 따라서 화면에 렌더링 할 수 있는 디렉티브입니다. 차이점 v-if 는 조건이 참이면 렌더링을 하고 거짓이면 아무 동작을 하지 않습니다. v-show는 조건에 따라서 display 속성을 이용하여 보이거나, 숨깁니다. 성능 차이 v-if는 실제로 화면을 렌더링을하고, 다시 지우고 해서 토글 비용이 높습니다. 반면에 v-show는 초기에 화면을 렌더링 할 때 비용이 높습니다. 무언가를 자주 토글을 해야하는 경우에는 v-show를 사용하고, 조건이 자주 변경될 가능성이 낮은 경우에는 v-if를 사용하는 것이 좋습니다..

  • format_list_bulleted Develop/Vue
  • · 2023. 7. 10.
  • textsms
반응형
  • navigate_before
  • 1
  • navigate_next
공지사항
  • 비전공자에서 프론트엔드 개발자 5년차 되기까지...
  • 2023년 조금 더 지난 상반기 회고 갓생살기
  • 파워쿠의 블로그 입니다.
전체 카테고리
  • 분류 전체보기 (360)
    • Develop (282)
      • JavaScript (80)
      • Vue (31)
      • Nuxt (9)
      • React (22)
      • Next.js (8)
      • CSS (12)
      • TypeScript (5)
      • 자료구조 & 알고리즘 (4)
      • Java (37)
      • DataBase (19)
      • C (9)
      • Git (3)
      • etc (19)
      • Made by powerku (8)
    • 일상 (77)
      • 맛집 (26)
      • 리뷰 (17)
      • 재테크 (7)
      • 이야기 (17)
      • 블로그 (9)
최근 글
Copyright © 쭈미로운 생활 All rights reserved.
Designed by JJuum

티스토리툴바