vue v-if 와 v-show 차이점

상태에 따라 현재 템플릿이나 정보를 보여줄지 말지를 

Vue 를 통해 나타낼 때 흔히

v-if / v-else 디렉티브 또는 v-show 디렉티브 를 사용한다.

둘 다 보여줄지 말지를 조건에 따라 결정한다는 것은 같지만 큰 차이점이 있다.

v-if 는 조건이 맞지않다면 해당 태그 자체를 생성하지 않고,

v-show 는 조건이 맞지않아도 해당 태그는 생성한 뒤 보이지 않게 처리를 한다는 점이 다르다.

즉, v-show 는 사실 렌더링은 한 후 

display: none 처리를 한것이라고 생각하면 된다.

따라서 둘다 결과적으로 화면에서 보이는 것은 같지만 

상태가 true false 가 계속해서 한 화면에서 반복되는 경우에는 v-if 의 경우 해당 태그를 그렸다가 지웠다 하기 때문에 

v-show 를 사용해 주는 것이 좋다. 이런 경우가 적다면 v-if 를 default 로 사용한다.