Vue3 기초: 조건부 렌더링

 

태그에 아래와 같은 속성을 주어서 조건에 해당할 때만 해당 태그를 렌더링 하게끔 설정할 수 있다.

v-if

v-else-if

v-else

 

또한

v-if 와 v-show 모두 조건부 렌더링에 이용되는 속성이지만

 

v-show는 조건에 맞지 않는 경우에도  엘리먼트는 화면에 그려진다. 다만, display속성을 none으로 주어 화면에 보이지 않는 것 처럼하는 것이고

 

이와 달리 v-if의 경우는 조건에 맞는 경우 화면에 새로 엘리먼트를 만들고 조건에 맞지않는 경우 화면에 그려진 엘리먼트를 삭제하는 다소 복잡한 로직으로 돌아가기 때문에 한 어플리케이션 내에서 자주 상태가 바뀌는 엘리먼트에 조건부 렌더링을 거는 경우에는 

 

v-if 보다는 v-show를 이용하는 것이 퍼포먼스 측면에서 유리하다.