여기 "반려동물은 강아지지!" 라는 의견과 "무슨소리, 고양이지!” 라는 두 가지 상반된 의견이 있습니다. 이 두 의견은 동시에 주장할 수 없는 의견이겠죠? 이럴 때는 두 가지 p 태그 중 조건에 따라 하나의 p 태그만을 랜더링 해줘야 합니다. 이럴 때 필요한 것이 바로 v-if 디렉티브입니다.
이번 글에서는 조건에 따라 다르게 렌더링을 할 수 있는 조건부 렌더링에 대해 알아보도록 하겠습니다.
[HTML]
조건부 랜더링 v-if, v-else
[JavaScript]
[HTML]
Vue 인스턴스 내에서는 data 에 dog라는 변수 만들어주고 값으로 true를 할당하였습니다.
템플릿에서는 클릭 시, 현재 dog가 true라면 false를, 현재 dog가 false 라면 true를 할당해주는 button을 만들었습니다.
그리고 p 태그 각각에 v-if=“dog”와 v-else 디렉티브를 설정해주었습니다.
v-if="조건상태"v-if 디렉티브는 위와 같이 v-if 뒤의 상태값이 true면 해당 태그를 렌더링하고, false인 경우 해당 태그를 렌더링하지 않는 조건부 렌더링 역할을 하는 디렉티브입니다. v-else 디렉티브는 v-if 디렉티브와 다음에 사용되어 v-if의 조건문을 만족하지 않는 경우에만 렌더링하는 역할을 합니다.
javascript의 if-else 구문을 생각하시면 이해하시기가 조금 수월 하실겁니다. if-else구문에서 else if구문도 있듯이 v-else-if 디렉티브도 존재하며 v-if의 조건문을 만족하지 않으면서 특정 조건을 만족하는 경우의 조건부 렌더링을 담당합니다.
v-if를 갖는 template를 활용한 조건부 그룹
v-if 디렉티브는 하나의 태그에만 동작하지 않고 해당 태그의 하위 태그에도 동작합니다. 우리는 이 속성과 template 태그를 활용하여 조건부 그룹을 만들어보겠습니다.
[HTML]
위의 코드에서 HTML 코드만 아래와 같이 변경하였습니다. 아래의 결과에서 보다시피 v-if, v-else 디렉티브는 해당 태그에 속해있는 하위 태그에도 영향을 미치는 것을 확인할 수 있습니다.
v-if vs v-show
Vue는 v-if 디렉티브와 비슷한 역할을 하는 v-show라는 디렉티브를 제공합니다. v-if 디렉티브와 마찬가지로 조건 상태값에 따라 결과값으로 보이고 보이지 않고가 달라지는데요.
v-show="조건상태"그렇다면 v-if와 v-show는 어떤 차이가 있는걸까요?
이를 확인하기위해 아래와 같이 코드를 작성해보았습니다.
[HTML]
두개의 p 태그를 넣고 하나는 v-if 디렉티브를, 하나는 v-show 디렉티브를 넣었습니다.
[JavaScript]
v-if와 v-show의 차이를 보기위해서 dog=false로 정의하였습니다.
이렇게 하면 당연히 결과는 두 문장 모두 보이지 않습니다.
하지만 실제로 HTML 코드가 어떻게 렌더링 되었는지 보기위해 크롬의 개발자도구를 이용하여 코드를 확인해보았습니다.(크롬>마우스우클릭>검사)
보이시나요? v-if 를 넣은 <p v-if=”dog”>반려동물은 강아지지!</p> 는 <!----> 로 처리되어 아예 렌더링 되지 않았고, <p v-show=”dog”>귀여운 댕댕이</p> 는 <p style=“display: none;”>귀여운 댕댕이</p>로 실제로 코드는 삽입되었지만 display: none 되어 스타일로 보이지 않도록 처리가 된 것을 확인하실 수 있습니다.
따라서 우리는 앞으로 조건에 따라 아예 코드를 지우고 싶다면 v-if 디렉티브를, 코드는 있지만 스타일로 display: none 처리를 하고 싶다면 v-show를 사용하여야 할 것입니다.
