[Vue.js] v-if 와 v-show 의 차이점

VueJS에서 엘리먼트, 컴포넌트 등을 숨기는 방법은?
일반적으로 가장 많이 사용되는 방법은 v-if 그리고 v-show를 사용하는 방법이다.

간단하고 빠르게 적용할 수 있기 때문!!
그런데 이 둘 중 어떤 것을 사용해야 할까?

v-if 그리고 v-show의 차이점은?

이 둘의 공통점은 둘 다 동일한 기능으로 숨기거나 보여준다는 점이지만 기능 구현에 큰 차이점이 있다!!
가장 큰 차이점은 실제 DOM을 그려주느냐의 여부에 따라 차이가 있음!
예를들어 v-if는 DOM 영역에 실제로 그려주지 않는 방법을 사용하고
이와 달리 v-show는 단지 css style의 display: none을 사용하여
보여주지만 않는다는 차이가 있다
이런 이유로 보여주거나 숨기는 액션이 반복된야한다면 v-show를 사용하고
그 외의 경우는 v-if를 사용하는 방법이 성능에 더 좋을 것!!