[Hoon] Vuejs 강의 - 조건부 렌더링

조건부 렌더링

https://kr.vuejs.org/v2/guide/conditional.html

v-if

Vue에서는 v-if 디렉티브를 사용

<h1 v-if="ok">Yes</h1>

new Vue({
      el:'#app',
      data: {    
         ok: true
      }
   })

v-else

 <h1 v-if="ok">Yes</h1>
 <h1 v-else>No</h1>

#template 에 v-if을 갖는 조건부 그룹 만들기

v-if는 디렉티브기 때문에 하나의 엘리먼트에 추가해야합니다

<template v-if="ok">
   <h1>Title</h1>
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
</template>

#v-else

v-else 디렉티브를 사용하여 v-if에 “else 블록”

<div v-if="Math.random() > 0.5">
	이제 나를 볼 수 있어요
</div>
<div v-else>
	이제는 안보입니다
</div>

v-else 엘리먼트는 v-if 엘리먼트 또는 v-else-if 엘리먼트 바로 뒤에 있어야 합니다. 그렇지 않으면 인식할 수 없습니다.

#v-else-if

v-else-if는 v-if에 대한 “else if 블록” 역할을 합니다. 또한 여러 개를 사용할 수 있습니다.

<div v-if="type === 'A'">
	A
</div>
<div v-else-if="type === 'B'">
	B
</div>
<div v-else-if="type === 'C'">
	C
</div>
<div v-else>
	Not A/B/C
</div>

new Vue({
      el:'#app',
      data: {    
         type: 'A' // B/C
      }
   })

v-else와 마찬가지로, v-else-if 엘리먼트는 v-if 또는 v-else-if 엘리먼트 바로 뒤에 와야 합니다.

#key를 이용한 재사용 가능한 엘리먼트 제어

Vue는 가능한 한 효율적으로 엘리먼트를 렌더링하려고 시도하며 종종 처음부터 렌더링을 하지않고 다시 사용합니다. Vue를 매우 빠르게 만드는데 도움이 되는 것 이외에 몇가지 유용한 이점이 있습니다. 예를 들어 사용자가 여러 로그인 유형을 트랜지션(변경)할 수 있도록 허용하는 경우입니다.

위 코드에서 loginType을 바꾸어도 사용자가 이미 입력한 내용은 지워지지 않습니다. 두 템플릿 모두 같은 요소를 사용하므로 input은 대체되지 않고 단지 placeholder만 변경됩니다.

<div id="app">
        <template v-if="loginType === 'username'">
            <label>사용자 이름</label>
            <input placeholder="사용자 이름을 입력하세요">
        </template>
        <template v-else>
            <label>이메일</label>
            <input placeholder="이메일 주소를 입력하세요">
        </template>
        <p></p>
        <button v-on:click="changeLoginType">로그인 유형 변경</button>
    </div> 

new Vue({
      el:'#app',
      data: {    
         loginType: 'username',         
         toggleLoginType: false
      },
      methods:{
      	changeLoginType: function(){          
          this.toggleLoginType = !this.toggleLoginType
          if(this.toggleLoginType){
          	this.loginType = ''
          }else{
          	this.loginType = 'username'
          }          
        }
      }
   })

이것은 항상 바람직하지는 않습니다. 때문에 “이 두 엘리먼트는 완전히 별개이므로 다시 사용하지 마십시오.”라고 알리는 방법을 제공합니다. 유일한 값으로 key 속성을 추가하십시오.

<template v-if="loginType === 'username'">
        <label>사용자 이름</label>
        <input placeholder="사용자 이름을 입력하세요" key="username-input">
    </template>
    <template v-else>
        <label>이메일</label>
        <input placeholder="이메일 주소를 입력하세요" key="email-input">
    </template>

new Vue({
      el:'#app',
      data: {    
         loginType: 'username',         
         toggleLoginType: false
      },
      methods:{
      	changeLoginType: function(){          
          this.toggleLoginType = !this.toggleLoginType
          if(this.toggleLoginType){
          	this.loginType = ''
          }else{
          	this.loginType = 'username'
          }          
        }
      }
   })

이제 변경 할 때마다 입력이 처음부터 렌더링됩니다.

label 엘리먼트는 key 속성이 없기 때문에 여전히 효율적으로 재사용 됩니다.

v-show

엘리먼트를 조건부로 표시하기 위한 또 다른 옵션은 v-show 디렉티브

<h1 v-show="ok">안녕하세요!</h1>

차이점은 v-show가 있는 엘리먼트는 항상 렌더링 되고 DOM에 남아있다는 점입니다. v-show는 단순히 엘리먼트에 display CSS 속성을 토글합니다.

v-show는 template 구문을 지원하지 않으며 v-else와도 작동하지 않습니다.

v-if vs v-show

v-if는 조건부 블럭 안의 이벤트 리스너와 자식 컴포넌트가 토글하는 동안 적절하게 제거되고 다시 만들어지기 때문에 “진짜” 조건부 렌더링 입니다

v-if는 또한 게으릅니다 초기 렌더링에서 조건이 거짓인 경우 아무것도 하지 않습니다. 조건 블록이 처음으로 참이 될 때 까지 렌더링 되지 않습니다.

비교해보면, v-show는 훨씬 단순합니다. CSS 기반 토글만으로 초기 조건에 관계 없이 엘리먼트가 항상 렌더링 됩니다.

일반적으로 v-if는 토글 비용이 높고 v-show는 초기 렌더링 비용이 더 높습니다. 매우 자주 바꾸기를 원한다면 v-show를, 런타임 시 조건이 바뀌지 않으면 v-if를 권장합니다.

v-if 와 v-for

v-if와 함께 사용하는 경우, v-for는 v-if보다 높은 우선순위를 갖습니다.

참고 - 리스트 렌더링 가이드

https://kr.vuejs.org/v2/guide/list.html#v-for-와-v-if

리스트 렌더링 — Vue.js

bit.ly/3fXOzon

인프런 인강 선착순 30% 마지막 할인 쿠폰 - Vue.js 핵심 강의!

 

bit.ly/2TtRHis

[Vue.js] Javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 - 인프런