🌿 Vue 템플릿 조건부 렌더링과 반복 처리 패턴

🌿 Vue 템플릿 조건부 렌더링과 반복 처리 패턴

Vue 기초 시리즈 > 2️⃣ 컴포넌트 기반 개발 > 5️⃣ 템플릿 조건부 렌더링과 반복 처리 패턴

• 1. 조건부 렌더링의 원리
• 2. v-if vs v-show 비교
• 3. 반복 렌더링 v-for 사용법
• 4. v-if와 v-for 조합 시 주의사항
• 5. v-for에서 :key의 중요성
• 6. 실전 예제 및 활용 팁
• 🔚 다음 글 안내

---

1. 조건부 렌더링의 원리

v-if나 v-show는 HTML 요소의 표시 여부를 제어합니다. 이때 DOM의 생성/제거가 발생할 수 있기 때문에 성능에 유의해야 합니다.

2. v-if vs v-show 비교

항목	v-if	v-show
동작 방식	조건에 따라 DOM 생성/제거	항상 DOM은 존재하며, display: none으로 숨김
초기 렌더링 비용	낮음 (조건 false면 렌더링 X)	있음 (무조건 렌더됨)
토글 빈도	변화 적은 경우 적합	자주 보였다 숨김에 적합

Tip: v-if는 조건이 자주 바뀌지 않는 경우, v-show는 탭 전환 같은 경우에 사용하세요.

3. 반복 렌더링 v-for 사용법

<li v-for="(item, index) in items" :key="item.id"> {{ index + 1 }}. {{ item.name }} </li> 

• 반복 대상은 배열이나 객체
• :key 속성은 필수
• index도 함께 가져올 수 있음

4. v-if와 v-for 함께 쓰기 주의

같은 태그에 v-if와 v-for를 동시에 쓰면 예측하기 어려운 동작이 발생할 수 있습니다.

<!-- 이렇게 하지 마세요 --> <li v-for="item in items" v-if="item.visible">{{ item.name }}</li> <!-- 이렇게 template으로 감싸세요 --> <template v-for="item in items"> <li v-if="item.visible">{{ item.name }}</li> </template> 

5. v-for에서 :key의 중요성

:key는 Vue가 DOM을 효율적으로 업데이트할 수 있도록 도와주는 식별자입니다.

<li v-for="item in items" :key="item.id">{{ item.name }}</li> 

• 항상 고유한 값을 사용하세요 (index는 지양)
• 렌더링 성능 및 버그 방지에 필수

6. 실전 예제 및 팁

✅ 조건 + 반복 혼합 예제

<ul> <template v-for="user in users"> <li v-if="user.active">{{ user.name }}</li> </template> </ul> 

✅ v-show는 자주 전환되는 UI에 사용

<div v-show="isVisible">탭 내용입니다</div> 

✅ 리스트에 key가 없으면?

• 컴포넌트 재사용 시 상태 꼬임
• 불필요한 DOM 리렌더 발생

🔚 다음 글 안내

조건부 렌더링과 반복문은 Vue 템플릿 표현의 핵심입니다. 다음 글에서는 Vue 작동 원리와 구조 이해를 통해 앱이 처음부터 어떻게 실행되고 작동되는지를 구조적으로 파악해봅니다.

👉 다음 글: Vue의 전체 작동 흐름 및 설정 파일 구성