[vue.js] v-if와 v-show의 차이와 사용 방법 구분

v-if 조건으로 렌더링하기

조건을 만족하지 못한 경우에 요소는 DOM 레벨에서 제거되며, 모든 감시도 제거 됩니다.

컴포넌트라면 인스턴스가 제거되며, 이후에 렌더링 될 때 모든 상태가 초기화 되어버립니다.

 

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

 

 

v-show 조건으로 출력하기

조건을 만족하지 않는 경우, 단순하게 display:none; 스타일을 적용합니다. 눈에 보이지 않더라도 모든 리액티브 데이터에 대한 내부적인 감시가 일어나므로 주의해 주세요.

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