Vue.js 기초 - 컴포넌트- 랜더링 문법

Vue 컴포넌트에서 조건에 따라 랜더링을 하는 방법은 v-if 디렉티브와 v-show 디렉티브를 사용하는 방법이 있다.

v-if

v-if 디렉티브 표현식은 다음과 같다.

<h1 v-if="bRender">bRender가 true이면, h1 블록이 화면에 보이게 됩니다.</h1>

=> v-if 디렉티브에 true가 리턴이 되면 html 블록이 랜더링 된다. 반대로 false인 경우는 화면에 랜더링 되지 않는다.

v-else 디렉티브를 사용해서 else 표현식을 사용할 수 있다.

<h1 v-if="bRender">bRender가 true이면, h1 블록이 화면에 보이게 됩니다.</h1>

<h1 v-else>bRender가 true가 아니면, h1 블록이 화면에 보이게 됩니다.</h1>

=> v-else-if 디렉티브를 사용해서 else if 표현싟을 사용할 수 있다.

v-show

v-show 디렉티브 표현식은 다음과 같다.

<h1 v-show='bShow">bShow가 true이면, 현재 블록이 화면에 보이게 됩니다.</h1>

v-if와 v-show의 차이점

v-if와 v-show는 비슷해 보이지만, 내부적으로 랜더링 되는 방식에 큰 차이가 있다.

v-if의 경우 조건을 만족하면 그 순간에 html 블록이 생성되고, 조건에 만족하지 않으면 html 블록은 삭제가 된다.

하지만 v-show의 경우는 조건 만족 여부에 상관 없이 무조건 html 블록이 생성되며, 조건을 만족하면 css의 display를 이용해서 화면에 보이게 되고, 조건을 만족하지 않으면 화면에서 숨기도록 처리가 된다. 즉, 조건 여부와 상관 없이 무조건 랜더링이 된다.

v-if는 해당 블록에 toggle이 일어날 때, v-show보다 더 많은 자원을 사용한다. v-if는 실제로 해당 블록 전체를 생성했다가 삭제하기 때문이다.

v-show는 조건 만족 여부에 상관없이 무조건 생성된 후 조건에 따라 보였다, 안 보였다 하는 것이기 때문에, 제일 처음에 조건이 만족하지 않더라도 html 블록을 무조건 생성한다는 단점이 있다. 즉, 초기에는 무조건 html 블록을 생성하는데 리소스를 사용하게 된다.

==> 해당 html 블록이 화면 내에서 자주 toggle이 일어나면 v-show를 사용하고, toggle이 일어나느 빈도가 적다면 v-if를 사용하는것이 좋다,.