안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간까지 우리는 데이터 바구니와 클릭 버튼을 만들어 보았습니다. 오늘은 조금 더 신기한 마법을 배워볼 거예요. 바로 조건에 따라 물건을 숨기거나 나타나게 하는 v-if(투명 망토)와, 수많은 아이템을 한 번에 소환하는 v-for(복제 마법)입니다!
1. v-if: 조건이 맞을 때만 나타나는 투명 망토
여러분, 해리포터의 투명 망토를 아시나요? 망토를 쓰면 보이지 않고, 벗으면 나타나죠. Vue.js에도 이런 망토가 있습니다. 바로 v-if라는 주문이에요.
예를 들어, ‘마법 점수가 10점이 넘을 때만 보물 상자를 보여줘!’라고 설정할 수 있어요. 조건이 참(True)일 때만 화면에 나타나고, 아니면 감쪽같이 사라진답니다.
2. v-for: 한 번에 수십 개를 만드는 복제 마법
웹사이트에 맛있는 사과 100개를 보여주고 싶을 때, 사과 그림 100개를 일일이 그릴 필요가 없어요. v-for라는 복제 주문을 사용하면 바구니(배열)에 담긴 아이템 개수만큼 알아서 척척 복사해준답니다. 목록을 만들 때 필수적인 마법이죠!
3. 실전 마법: 마법의 쇼핑 리스트 만들기
이번에는 우리가 사고 싶은 마법 도구들을 리스트로 보여주고, 버튼을 눌러 리스트를 보여줬다 숨겼다 하는 코드를 만들어 보겠습니다.
<div id="app">
<!-- 투명 망토 마법: showList가 참일 때만 아래 내용이 보여요 -->
<button @click="showList = !showList">
{{ showList ? '리스트 숨기기' : '리스트 보기' }}
</button>
<div v-if="showList">
<h2>오늘의 마법 쇼핑 목록</h2>
<ul>
<!-- 복제 마법: items 바구니 안의 물건들을 하나씩 꺼내서 보여줘요 -->
<li v-for="item in items" :key="item">
✨ {{ item }}
</li>
</ul>
</div>
<p v-else>리스트가 숨겨져 있어요. 버튼을 눌러보세요!</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
showList: true, // 리스트를 보여줄지 말지 결정하는 스위치
items: ['빛나는 지팡이', '하늘을 나는 빗자루', '변신 물약', '마법 주문서'] // 쇼핑 목록
}
}
}).mount('#app');
</script>
4. 생활 속의 마법 응용
우리가 스마트폰에서 ‘알람 설정’을 켜면 아래에 시간 설정 메뉴가 생기는 것이 바로 v-if 마법이고, 친구 목록에서 친구 이름들이 쭉 나오는 것이 v-for 마법이에요. 우리 주변의 모든 앱이 이 마법들로 이루어져 있답니다.
마치며: 복잡한 웹사이트도 이제 문제없어요!
오늘 배운 두 가지 마법만 있으면 아무리 내용이 많은 웹사이트도 깔끔하게 정리하고 보여줄 수 있습니다. 아이들과 함께 쇼핑 목록에 새로운 아이템을 추가해 보거나, 조건에 따라 글자 색이 바뀌게 응용해 보세요. 코딩의 재미가 두 배가 될 거예요!
