v-if와 v-show의 차이점.

v-if와 v-show. 둘 다 조건부 렌더링에서 사용하는데에 쓰입니다.

v-if는 조건이 만족했을 때에 렌더링을 하고 그렇지 않을 시에 dom 레벨에서 제거되며, 그와 관련된 모든 감시들도 제거됩니다.

만약 컴포넌트라면 인스턴스가 제거 되며 이후 렌더링이 되면 모든 상태가 초기화가 되겠죠.

 

v-if는 주로 특정한 데이터를 가지고 있지 않을 시 오류를 발생시키거나, 컴포넌트를 많이 사용되는 경우에 사용됩니다.

주로 에러 출력이나, 비동기 처리로 불러온 값에 따라 렌더링을 요구할 시에 사용하죠.

 

v-show는 display:none으로 처리를 하기 때문에 dom 레벨에서도 제거되지 않으며, 모든 감시들도 제거되지 않기 때문에 상태값도 초기화가 되지 않습니다.

추로 변경 빈도가 높은 경우에 사용하며 대표적으로 다이얼로그의 open이나 close에 많이 사용되죠.

 

결론으로 보자면 둘 다 조건부인 건 같지만 v-if는 dom레벨 남아있지 않고, v-show는 dom레벨에서 남아있다는 점이 있겠네요.

 

이 정도로만 써도 다들 이해하겠지만, 내용을 늘이기 위해서 좀 더 디테일하게 알아보겠습니다.

공식 문서를 보죠.

https://ko.vuejs.org/guide/essentials/conditional.html#v-show

조건부 렌더링 | Vue.js

위 문서에 v-if와 v-show의 차이점에 대해 자세하게 나와있습니다.

v-if는 실제의 조건부 렌더링이며 위에서 말했던 대로 블록이 전환될 경우 블록 내 이벤트 리스너와 자식 컴포넌트가 제대로 제거되거나 재생성된다고 합니다.

또한 게으르며(lazy), false를 만나게 되면 아무런 작업도 수행하지 않게 된다고 하네요.

반면 v-show는 css기반으로 전환되므로 초기 조건과 관계없이 항상 렌더링이 된다고 합니다.

결론적으로 보자면  v-if는 전환 비용이 v-show보다 더 높고, v-show는 v-if보다 초기 렌더링 비용이 더 높다고 합니다.

 

그렇다면 어디에 쓸 지 좀 더 명확해지게 되겠네요.

v-show는 초기 렌더링 비용에 비해 자주 전환되어야 할 경우에 사용하는 게 좋고, v-if는 전환을 자주 하지 않고 조건이 자주 변경되지 않는 페이지, 혹은 컴포넌트에 사용하는게 좀 더 좋겠습니다.

 

늘 느끼는 거지만 결국 정답은 공식 문서에 있는 것 같습니다.

처음 공부할 때에 블로그와 영상도 물론 좋지만 공식 문서를 보면서 공부하는 게 더 좋다는 걸 깨닫고 갑니다.