[Vue.js] 조건부 렌더링
yeoseon opened this issue · comments
화면의 스타일이나 형식은 같은데, 화면에 따라 보여주고 싶은 요소가 다를 때.. Component 각각으로 나누어서 필요한 부품을 조립해서 사용하는 것도 좋지만, 너무 세세하게 나눠지게 되면 결국은 Component 별 파일이 하나씩 더 생기는 것이고, 스타일도 중복관리될 것 같다.
조건부 렌더링을 배우고 사용해서 Planting 화면의 Follow 화면을 구현해보자.
Reference
Vue.js - 조건부 렌더링
Handlebars, Mustache와 같은 HTML 템플릿
{{#if ok}}
<h1>Yes</h1>
{{/if}}
Vue
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
하나 이상의 엘리먼트를 트랜지션 - <template> 엘리먼트 이용
최종 렌더링 결과에는 <template>가 포함되지 않음.
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
v-else-if
2.1.0부터 추가된 기능
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>
key를 이용한 재사용 가능한 엘리먼트 제어
Vue는 가능한 한 효율적으로 엘리먼트를 렌더링하려고 시도한다.
종종 처음부터 렌더링을 하지 않고 다시 사용한다.
이런 특성을 이용하여 다음과 같은 기능을 구현할 수 있다.
<template v-if="loginType === 'username'">
<label>사용자 이름</label>
<input placeholder="사용자 이름을 입력하세요">
</template>
<template v-else>
<label>이메일</label>
<input placeholder="이메일 주소를 입력하세요">
</template>
- loginType을 바꾸어도 이미 입력한 내용은 지워지지 않는다.
- 하지만 이 방법은 애매해서 좋지 않다. 명시적으로 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>
<label>엘리먼트는 key를 가지고 있지 않으므로 재사용 될 것이다.- 이제 loginType을 바꾸면 입력했던 내용도 지워질 것이다. = 이 처음부터 렌더링 될 것이다.
v-show
<h1 v-show="ok">안녕하세요!</h1>
v-if와 차이점
- 항상 렌더링되고 DOM에 남아있다. = 렌더링이 안되는 것이 아니라
display: none;처리 된다는 것 <template>을 지원하지 않고,v-else와도 동작하지 않는다.
v-if vs v-show
v-if
- 진짜 조건부 렌더링이다.
- 게으르다.
- 초기 렌더링에서 거짓인 경우 아무 것도 하지 않는다. 참이 될 때까지 렌더링 하지 않는다.
- 토글 비용이 높다.
- 런타임시 조건이 바뀌지 않는다면 사용한다.
v-show
- 훨씬 단순한다.
- 초기 조건에 관계없이 항상 렌더링 되고, CSS 토글만을 수행한다.
- 초기 렌더링 비용이 높다.
- 매우 자주 바뀐다면 사용한다.
v-if vs v-for
같이 사용할 경우 v-for가 더 높은 우선순위를 갖는다.
직접 사용해서 예제를 넣어보고 Close