Vue.js - v-show와 v-if의 차이점과 사용 방법

 

 

 

본론부터 말하면 v-show와 v-if의 가장 큰 차이점은 v-if는 주석 v-show는 display:none으로 처리 된다는 게 가장 큰 차이점이다.

 

v-show와 v-if의 차이는 구현 된 결과물의 따라 '개발자 도구'를 통해 DOM Node의 Element 변화를 확인 할 수 있다.

 

가끔 어떨때 v-show를 사용해야 하고 어떨때 v-if를 사용하여 분기처리를 해야하는 지 헷갈릴때가 간혹 있다.

 

그렇다면 둘 다 '안보이게' 처리를 하고 싶은건 맞지만 어떨때 적절한 처리를 하는 것이 좋을까??

 

(구글에 v-show와 v-if의 코드 정리의 대해 너무 자세하게 설명 되어 있는 것들이 많아 이번에는 예제 코드를 따로 작성하지는 않았다...)

 

 

v-if(v-else-if, v-else)

 

v-if는 우리가 자주 쓰는 if문의 활용에서 알다시피 조건의 만족하는/만족하지 않는 처리를 사용할 때 사용한다.

 

조건의 만족하면 Rendering을 하고 조건의 만족하지 않으면 DOM 레벨에서 제거되며, 모든 감시(Watch등...)도 제거된다. 또한, 컴포넌트라면 인스턴스가 제거되며 이 후 Rendering 할 때 모든 상태가 초기화 된다.

 

v-if는 내부에서 디렉티브 또는 컴포넌트를 많이 사용하는 경우, 특정한 데이터를 따로 가지고 있지 않다면 오류가 발생했을 때 v-if를 사용하는 것이 좋다.

 

자주 사용되는 예 : 보통 왼쪽 상단에 있는 로그인을 실시하여 성공하면 로그아웃 버튼이 생성 될 때, 비동기 처리로 불러온 값 처리의 따라 Rendering을 할 때.

 

 

 

v-show

 

v-show는 display:none 처리를 하며 DOM 레벨에서 제거되지 않는 상태이므로 내부적인 감시가 일어나므로 주의해야 한다.

 

내부에 디렉티브 또는 컴포넌트가 없고, 변경 빈도가 높은 경우에 v-show를 사용하는 것이 제일 좋다.

 

자주 사용되는 예 : dialog의 Open/Close 등...

 

 

 

참고

 

사실 이 차이의 대해서 정말 좋은 설명이 되어 있는 곳이 공식 문서다.

 

공식문서에서 한번 보는 것도 나쁘지 않을 것 같다. 항상 기술은 변화하며 버전의 따라 바뀌는 점도 있기 때문이다.

 

역시 공식문서 만큼 좋은게 없다는 생각도 들긴 하지만 어디까지나 번역이기 때문에 가끔 이해를 못할 때도 있어 필요에 따라 정리를 해본다.

(공식 문서 참고 : https://kr.vuejs.org/v2/guide/conditional.html)

 

 

 

 

 

 

 

 

 

(본문 참고 : 고양이도 할 수 있는 Vue.js)