VueJS - 렌더링

안녕하세요, 미래의 Vue.js 슈퍼스타! Vue.js 렌더링의 흥미로운 여정에 당신을 안내하게 되어 기쁩니다. 프로그래밍을 가르치는 지식을 여러 해 동안 쌓아온 저는 당신에게 확신할 수 있습니다. 렌더링을 마스터하는 것은 그림을 그리는 것과 같습니다. 우리가 디지털 캔버스를 활성화시키는 방법입니다! 그麼, 손을 싹 다물고 들어보겠습니다!

VueJS - Rendering

조건부 렌더링

당신이 마술사라면, 손끝을 튕기는 것으로 웹페이지에 있는 것을 나타내거나 사라지게 하고 싶을 것입니다. Vue.js의 조건부 렌더링은 바로 그런 기능을 제공합니다! 특정 조건에 따라 요소를 보이거나 숨기는 것입니다.

v-if 지시자

v-if 지시자는 우리의 첫 번째 트릭입니다. 클럽의 보안관처럼, 누가 들어갈 수 있는지 결정합니다.

<div id="app">
<h1 v-if="isVisible">Now you see me!</h1>
</div>

<script>
new Vue({
el: '#app',
data: {
isVisible: true
}
})
</script>

이 예제에서, <h1> 요소는 isVisible이 true인 경우에만 나타납니다. 그렇지 않으면, 푸фф! DOM에서 완전히 사라집니다. 숨겨진 것이 아니라, 존재하지 않았던 것처럼 사라집니다!

v-else와 v-else-if 지시자

이제 v-else와 v-else-if로 더 많은 마술을 추가해보겠습니다:

<div id="app">
<div v-if="temperature < 0">It's freezing!</div>
<div v-else-if="temperature < 20">It's cool.</div>
<div v-else>It's warm!</div>
</div>

<script>
new Vue({
el: '#app',
data: {
temperature: 25
}
})
</script>

여기서 우리는 간단한 기상 보고서를 만들고 있습니다. temperature 값에 따라 다른 메시지가 나타납니다. 무대에 여러 개의 함정 문이 있는 것처럼, 동시에 하나만 열릴 수 있습니다!

v-show 지시자

때로는 조금 더 가식적인 방법을 사용하고 싶을 수 있습니다. v-show를 소개합니다:

<div id="app">
<h1 v-show="isVisible">I'm always here, just sometimes invisible!</h1>
</div>

<script>
new Vue({
el: '#app',
data: {
isVisible: true
}
})
</script>

v-if과 달리, v-show는 요소를 DOM에서 제거하지 않습니다. 단지 CSS를 사용하여 숨기는 것입니다. 요소에 인Visibility cloak을 입히는 것처럼 생각하면 됩니다.

목록 렌더링

이제 것을 나타내고 숨기는 방법을 마스터했으니, 단일 템플릿에서 여러 요소를 만드는 방법을 배워보겠습니다. 여기서는 목록 렌더링이 유용합니다!

v-for 지시자

v-for 지시자는 마법의 복사기입니다. 템플릿을 가져다가 배열이나 객체의 각 아이템에 대해 복제합니다.

<div id="app">
<ul>
<li v-for="fruit in fruits">{{ fruit }}</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
fruits: ['Apple', 'Banana', 'Cherry', 'Date']
}
})
</script>

이 예제에서 우리는 과일 목록을 만들고 있습니다. v-for 지시자는 fruits 배열의 각 과일을 순회하면서 새로운 <li> 요소를 생성합니다. 마치 작은 엘프들이 각 과일 이름을 새로운 종이에 적는 것처럼!

v-for와 객체의 사용

v-for은 배열뿐만 아니라 객체에도 작동합니다!

<div id="app">
<ul>
<li v-for="(value, key) in person">{{ key }}: {{ value }}</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
person: {
name: 'Alice',
age: 28,
job: 'Developer'
}
}
})
</script>

여기서 우리는 사람에 대한 정보를 표시하고 있습니다. v-for 지시자는 person 객체의 각 속성을 순회하면서 새로운 <li> 요소를 생성합니다.

v-for와 범위

특정 수의 요소를 만들고 싶다면? v-for이 그 역할을 할 수 있습니다!

<div id="app">
<span v-for="n in 5">{{ n }} </span>
</div>

이렇게 하면 숫자 1에서 5를 표시합니다. Vue에게 세어달라고 요청하는 것과 같습니다!

키 속성

v-for을 사용할 때, 각 렌더된 요소에 고유한 key를 주는 것이 중요합니다. 이는 Vue가 요소들이 변경되었는지, 추가되었는지, 제거되었는지 추적하는 데 도움이 됩니다.

<div id="app">
<ul>
<li v-for="fruit in fruits" :key="fruit.id">
{{ fruit.name }}
</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
fruits: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Cherry' }
]
}
})
</script>

key는 각 요소의 nametag라고 생각하면 됩니다. 목록이 변경될 때 Vue가 누가 누구인지 식별하는 데 도움이 됩니다.

메서드 표

여기서 우리가 배운 메서드를 요약한 표를 제공합니다:

지시자	목적	예제
v-if	조건부로 요소 렌더링	`<div v-if="isVisible">Hello</div>`
v-else	v-if가 거짓일 때 대체	`<div v-else>Goodbye</div>`
v-else-if	추가 조건 제공	`<div v-else-if="isSpecial">Special</div>`
v-show	요소의 가시성 토글	`<div v-show="isVisible">Always in DOM</div>`
v-for	목록의 아이템 렌더링	`<li v-for="item in items">{{ item }}</li>`

그렇습니다, 열정적인 학생 여러분! Vue.js 렌더링의 기본을 다룬 것입니다. 연습이 완벽을 만들어 줍니다. 이 개념들을 실험해보지 마세요. 곧 Vue.js 컴포넌트를 프로처럼 렌더링하고, 동적인 인터랙티브 웹 페이지를 만들어 사용자를 놀라게 할 수 있을 것입니다. 계속 코딩하고, 학습하고, 가장 중요한 것은 즐겁게 만들어가세요!

Credits: Image by storyset