html에 인코딩하는 v-if, v-else, v-else-if에 대해 알아보자
v-if는 js의 if문과 같이 작동한다고 보면 된다.
위처럼, p에서는 goals.length 가 0일때 작동하고 그 아래의 ul 에서는 goals.length가 0 초과일 때 작동하게 하였다.
여기서 중요한 것은 else의 경우, v-if와 직접적으로 붙어있는 바로 다음 구문에만 사용할 수 있다는 것이다.
if 와 else의 사이에 어떠한 다른 것이 존재한다면 제대로 작동하지 않는다.
그러면 여기서 드는 생각이 있다.
왜 js에서 if문을 사용하지 않고, html에 적용을 하는것일까?
이게 과연 필요한 기능인가?
html에 직접적으로 적용하는 if나 else의 경우에는 dom에 직접적인 영향을 준다.
위의 예제에 적용하여 쉽게 말하면, 만약에 goals.length가 0인 경우에는 ul이 존재하지 않는다.
사진을 보면, p의 밑에 있어야 할 ul이 보이지 않는 모습이다.
그렇다면 goals.length 가 0을 초과한 경우는 어떻게 될까?
p가 사라지고 ul이 생길 것이다.
그렇다면, v-show는 무엇일까?
v-show는 v-if,else,else-if를 제약없이 사용할 수 있는 기능이라고 생각하면 된다.
v-if, else처럼 꼭 붙여서 사용해야한다던지 등의 제약이 없다.
v-if처럼 똑같이 작동하는 '것'처럼 보이지만, Dom에서 차이가 드러난다.
앞서 v-if, else는 실제로 Dom에 없어지거나 존재하거나 하는 모습을 보여줬다.
하지만 v-show는 쉽게 말해서 display - none, visible처럼 작동한다.
위에서 사용한 예제에 v-if 와 v-else-if 대신에 v-show 를 사용하면 다음과 같이 적용된다.
정리
- v-if는 js의 if문 처럼 작동한다.
- v-else는 v-if와 직접적으로 맞붙은 경우에만 작동한다.
- v-if,else,else-if는 Dom의 렌더링에 직접적인 영향을 준다.
- v-show는 제약없는 v-if이지만 디스플레이적으로 보이거나 안보일뿐, dom에 직접적인 영향을 주진 않는다.
- v-if, else, else-if는 일반적인 경우 사용, v-show는 디스플레이가 자주 바뀌는 부분에 사용 (ex.토글)
사실 Dom의 렌더링에 직접적인 영향을 줘야하는 경우를 겪어보지 못했다.일단은 디스플레이가 자주 바뀌는 토글같은 경우에 v-show가 더 낫다라는 정도만 이해했다. 심화된 사용법은 최적화에 관련한 내용일 것 같다는 생각이 드는데, 언제 어떻게 써야할지 알아보도록 해야겠다.
