v-if & v-show 해부: 조건부 렌더링

핵심 개념

v-if는 조건이 false일 때 DOM에서 완전히 제거합니다. v-show는 display:none으로 숨깁니다. v-else-if, v-else로 분기합니다. v-if를 지우며 조건부 렌더링이 어떻게 사라지는지 확인하십시오.

코드 분석

VUE📋 코드 (25줄)



const { createApp, ref } = Vue;
createApp({
  setup() {
    const threat = ref(5);
    const showDetails = ref(true);
    return { threat, showDetails };
  },
  template: `
    <div>
      <div style='margin-bottom:12px;'>
        <button @click='threat--' style='background:#333; color:#888; border:none; padding:4px 8px; cursor:pointer; font-family:monospace; font-size:10px; margin-right:4px;'>-</button>
        위협도: {{ threat }}
        <button @click='threat++' style='background:#333; color:#888; border:none; padding:4px 8px; cursor:pointer; font-family:monospace; font-size:10px; margin-left:4px;'>+</button>
      </div>
      <div v-if='threat >= 9' style='color:#10b981; font-size:12px;'>⚠ CRITICAL — 즉시 대응</div>
      <div v-else-if='threat >= 7' style='color:#f59e0b; font-size:12px;'>⚡ HIGH — 경계 강화</div>
      <div v-else-if='threat >= 4' style='color:#22c55e; font-size:12px;'>✓ MEDIUM — 모니터링</div>
      <div v-else style='color:#555; font-size:12px;'>○ LOW — 대기</div>
      <div v-show='showDetails' style='margin-top:8px; color:#555; font-size:11px;'>v-show: DOM 유지, display만 변경</div>
      <button @click='showDetails = !showDetails' style='margin-top:8px; background:#1a1a1a; color:#555; border:1px solid #333; padding:4px 8px; cursor:pointer; font-family:monospace; font-size:10px;'>TOGGLE DETAILS</button>
    </div>
  `
}).mount('#conditional-output');

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 Vue 3 'v-if & v-show' 코드에서
반응성 시스템 관련 버그와 watch 누수를
찾아서 수정해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'v-if & v-show'를 활용한 실전 Vue 컴포넌트를
Composition API + script setup 문법으로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 Vue 'v-if & v-show' 사용 패턴 전체를 분석하고
번들 크기·렌더링 성능·반응성 효율을
종합 점검해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

Vue 3 'v-if & v-show'가 React의 대응 기능 대비
어떤 장단점이 있는지 솔직하게 평가하고
실무 선택 기준을 알려줘.

⭐ 이것만 기억하세요

v-if & v-show 해부: 조건부 렌더링은 이 3가지만 확실히 잡으세요

1.조건 없이 모든 UI를 렌더링하면 로딩 중에 빈 데이터가 보이거나, 권한 없는 콘텐츠가 노출됩니다

2.v-if는 조건이 false면 DOM에서 완전히 제거하고, v-show는 display:none으로 숨겨 토글 비용이 적습니다

3.다음 챕터에서 배열 데이터를 반복해서 리스트로 렌더링하는 v-for를 배웁니다

💬 이 챕터 질문 보기

VUE · CH.9 — 질문하거나 답변을 확인하세요

→

진행도 9 / 34

← 커리큘럼으로 ← 목록으로 (Vue 3)