[ VueJS 프로그래밍 ] VueJS 에서 조건부 렌더링 v-if, v-show 등 사용 방법

VueJS 에서 어떤 상태 변수의 특정 조건이 되었을 때 Dom 을 렌더링하거나 표시하는 식으로 구현할 수 있다.

const getPostView = computed(()=>{ return ` <div style='background: red'> Hello! </div> `; });

우선 getPostView 라는 computed 된 getter을 만들어 <div> 스타일을 반환하는 하나의 반환자를 만든다. 여기서 getPostView 는 <div> 블럭을 반환하여 필요한 상황일 때 특정 블럭을 반환하는 식으로 구현할 수 있다.

예를 들자면, 이 computed 공간 안에 if 조건 분기문을 넣어 필요에 따라 특정 블럭을 반환하는식으로 구현할 수 있다.

다만 위와 같이 getPostView 를 그대로 가져와 {{ }} 수식안에 출력하는 경우 모든 내용은 인젝션 방지 기능으로 인해 HTML 태그가 아닌 문자열로 치환되어 출력된다.

따라서 HTML 태그를 출력하는 데에는 적합하지 않다. 즉 {{ }} 는 어떤 결과 값을 출력하는데 주로 사용하고, HTML 태그 덩어리를 출력하기 위해서는 v-html 속성 태그를 사용해야 한다. 원하는 영역에 v-html 속성을 추가한 뒤에 사용하고자 하는 상태 변수 또는 HTML 변수를 기입하면 된다.

다만 위와 같은 방법은 별로 권장되지는 않는다고 한다. 물론 필요에 따라서 사용은 할 수 있겠지만 인젝션 등의 위험이 존재한다. (물론 고도로 잘 프로그래밍 했으면 크게 문제는 없을 것으로 보이지만 VueJS 를 사용해서 프로그래밍할 때에는 굳이 위와 같은 방법을 사용할 필요가 있는지 고민해야 할 것으로 보인다.) 특히 위와 같은 방법으로 구현하면 IDE 에서 제공하는 HTML 편집 기능을 온전히 사용할 수 없을 뿐더러 소스 코드가 비교적 지저분해질 수 있다는 문제가 존재한다.

즉 위와 같은 코드에서, rf 값이 10 이상인 경우에만 div 블럭이 출력되는 div 블럭이 존재하는 것이다. 조건이 10 이상이 되기 전에는 빈 div로 존재하다가, 조건이 되면 지정된 데이터로 안이 채워진다고 볼 수 있다.

<div data-v-0904fc8e=""> <div style="background: red"> Hello! </div> </div>

그래서 보통은 template 내에서 특정 태그에 조건을 넣고 조건이 만족되면 해당 태그가 전체적으로 출력되게 하는 방법을 사용할 수 있는데,

<div v-if='rf>10' style='background: red'> Hello! </div>

위와 같이 div 영역을 애초 처음부터 template 영역에 작성한 뒤, v-if 속성 태그를 사용해서 조건에 만족하는 경우에만 해당 div가 렌더링되도록 한다. template 영역 안에서 특정 조건을 만족할 때에만 렌더링되게 하고 싶은 태그의 v-if 에 상태 변수 및 조건 사항을 넣어 원하는 상황일 때만 렌더링되도록 할 수 있다.

<div data-v-0904fc8e="" style="background: red;"> Hello! </div>

특히 v-if 는 조건이 만족할 때에만 dom 에 실시간으로 생성하는 것으로, 조건에 만족하지 않는 경우 Dom 자체가 사라진다.

이와 약간 다른 것으로 v-show가 있는데, v-show 는 dom 자체는 렌더링하지만 display 스타일 옵션을 통해 화면상에 렌더링할 것인지를 정의한다. 즉 Dom 자체는 구현된 상태로, 화면 상에 렌더링하는지를 결정한다.

따라서 v-show 로 구현된 Dom 의 소스를 보면

<div data-v-0904fc8e="" style="background: red; display: none;"> Hello! </div>

위 코드와 같이 style 옵션 내에서 display가 none 으로 되어있는 것을 볼 수 있다.

아무튼 본론으로 돌아와서 v-if 외 v-else-if, v-else가 있는데

사용법은 그렇게 어렵지 않다. 그냥 if 문이라고 생각하고 {} 블럭이 없지만 동일한 else-if, else 구문을 사용하면 된다.

<div data-v-0904fc8e="">0 <button data-v-0904fc8e="">클릭</button><div data-v-0904fc8e="" style="background: green;"> Hello3 </div></div>

조건에 만족하는 div 영역만 렌더링되는 것을 확인할 수 있다.