6. 조건부 렌더링(v-if, v-else-if, v-else, v-show)

조건부 렌더링

v-if

---

Vue에서는  v-if 디렉티브를 사용해 조건문을 작성
여느 다른 언어의 조건문과 같이  v-if , v-else-if, v-else 사용

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

 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">
    you can see me
</div>
<div v-else>
    you can't see me
<div>

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>

순서는 v-if > v-else-if > v-else

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

Vue는 효율적으로 엘리먼트를 렌더링하려 시도하며, 종종 처음부터 렌더링을 하지 않고 다시 사용함.
아래 예는 사용자가 여로 로그인 유형을 전환할 수 있도록 허용하는 경우

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

위의 코드에서 로그인타입을 바꿔도 원래 작성한 내용은 유지되는데
이때  placeholder 속성 뒤에 key=”username-input”, key=”email-input” 을 각각 적어주면 로그인 유형 변경시 내용도 초기화가 된다

v-show

---

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

<h1 v-show="ok">안녕</h1>

위와같이 사용하며  v-if 와의 차이점은  v-show 가 있는 엘리먼트는 항상 렌더링 되어 DOM에 남아있고, display CSS 속성을 토글해 나타내고 감춤

v-if vs v-show

---

 v-if 는 조건부 블럭 안의 내용에 따라 제거되고 만들어지고
 v-show 는 우선 렌더링이 되고 CSS 속성으로 감추고 보여줌
따라서  v-if 는 토글 할 때의 비용이 높고,  v-show 는 초기 렌더링 비용이 높으므로
자주 바뀐다면  v-show , 바뀌지 않는다면  v-if 를 권장함

v-if와 v-for

---

뒤에 나오겠지만  v-if 보다  v-for 이 높은 우선순위를 가지고 있음