국쥐의 개발 일상

VueJS로 개발을 하다보면 화면을 숨기거나 조건에 따라 다르게 보여줄 경우 v-if, v-show directive를 활용하여 처리하는 경우가 많다. 하지만 v-if와 v-show를 경우에 따라 알맞게 사용해야 성능에 유리하다. v-if 조건부 렌더링을 수행한다. 조건에 맞지 않으면 초기 렌더링 때 DOM에 유지 되지 않는다. v-show display: none, display: block의 차이이다. 초기 렌더링 때 DOM에 유지 된다. 사소한 차이지만 우리는 경우에 따라 v-if, v-show directive를 나눠서 사용할 수 있다. Toggle 작업이 자주 일어나는 경우 v-show가 유리하고, Toggle 작업이 별로 일어나지 않는 경우에는 v-if가 성능적으로 유리하다고 생각 할 수 있다.