템플릿 조건문, 반복문

Vue.js 템플릿: 조건문과 반복문 심층 분석

Vue.js는 데이터와 뷰를 연결하여 동적인 웹 페이지를 구축하는 데 효과적인 프레임워크입니다. 특히 템플릿 시스템은 간결하고 직관적인 문법으로 데이터를 화면에 표현하는 데 핵심적인 역할을 합니다. 이번 글에서는 Vue.js 템플릿에서 자주 사용되는 조건문과 반복문에 대해 자세히 알아보고, 다양한 예시와 함께 활용 방법을 설명하겠습니다.

1. 조건부 렌더링: v-if, v-else, v-show

v-if 디렉티브는 주어진 표현식이 true일 때만 요소를 렌더링합니다. DOM에서 완전히 제거되므로 성능에 유리합니다.

<template>
  <div v-if="showParagraph">
    <p>이 문단은 showParagraph가 true일 때만 보입니다.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showParagraph: true
    }
  }
}
</script>

v-else 디렉티브는 v-if와 함께 사용하여 v-if의 조건이 false일 때 렌더링할 내용을 지정합니다.

<template>
  <div v-if="isLoggedIn">
    <p>로그인되었습니다.</p>
  </div>
  <div v-else>
    <p>로그인해주세요.</p>
  </div>
</template>

v-show 디렉티브는 v-if와 비슷하지만 DOM에서 요소를 제거하지 않고 style.display 속성을 변경하여 숨깁니다. 조건이 자주 바뀌는 경우 v-show를 사용하는 것이 더 효율적일 수 있습니다.

<div v-show="showButton">
  <button>버튼</button>
</div>

네, v-if와 v-else는 반드시 같은 레벨의 노드에서 사용해야 합니다.
Vue는 v-else를 직전의 v-if 조건문과 연결하기 때문에, v-if와 v-else 사이에 같은 부모 아래에 위치한 다른 노드나 태그가 있으면 작동하지 않습니다.

728x90

---

잘못된 예:

v-if와 v-else 사이에 다른 노드가 있는 경우

<template>
  <div>
    <div v-if="isLoggedIn">
      <p>로그인되었습니다.</p>
    </div>
    <span>이건 다른 요소입니다.</span>
    <div v-else>
      <p>로그인해주세요.</p>
    </div>
  </div>
</template>

이 경우, v-else는 직전의 v-if와 연결되지 않으므로 작동하지 않고, Vue 개발자 도구에서도 경고가 표시됩니다.

---

올바른 예:

v-if와 v-else를 같은 레벨에 배치한 경우

<template>
  <div>
    <div v-if="isLoggedIn">
      <p>로그인되었습니다.</p>
    </div>
    <div v-else>
      <p>로그인해주세요.</p>
    </div>
  </div>
</template>

이 경우, v-if와 v-else는 같은 부모 <div> 아래에서 바로 연결되므로 정상 작동합니다.

---

주의 사항:

1. 직접 연결 규칙:
   • v-if와 v-else는 반드시 같은 부모 요소 아래에 있어야 하고, 다른 태그로 분리되지 않아야 합니다.
2. v-else만 사용 불가:
   • v-else는 반드시 바로 앞에 v-if(또는 v-else-if)가 있어야 합니다.
   • v-if 없이 단독으로 사용하면 Vue에서 오류를 발생시킵니다.

---

예제: v-else-if 포함

여러 조건을 처리할 때 v-else-if를 사용할 수 있습니다.

<template>
  <div>
    <div v-if="isLoggedIn && isAdmin">
      <p>관리자 계정으로 로그인되었습니다.</p>
    </div>
    <div v-else-if="isLoggedIn">
      <p>일반 계정으로 로그인되었습니다.</p>
    </div>
    <div v-else>
      <p>로그인해주세요.</p>
    </div>
  </div>
</template>

요약:

• v-if와 v-else는 같은 레벨에 있어야 한다.
• 중간에 다른 요소가 있으면 연결되지 않아 작동하지 않는다.
• 여러 조건이 필요하면 v-else-if를 활용하자.

2. 리스트 렌더링: v-for

v-for 디렉티브는 배열이나 객체를 반복하여 리스트를 생성합니다.

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' }
      ]
    }
  }
}
</script>

• :key 속성은 Vue가 리스트 항목의 고유성을 추적하는 데 사용됩니다. 리스트 항목이 추가, 삭제, 이동될 때 Vue는 최소한의 DOM 조작으로 효율적으로 업데이트합니다.

3. 템플릿 내부에서 조건부 렌더링과 반복문 활용

<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button v-if="todo.completed">완료</button>
      <button v-else @click="toggleTodo(todo)">완료</button>
    </li>
  </ul>
</template>

위 예시에서는 todos 배열을 반복하여 할 일 목록을 생성하고, 각 할 일 항목에 대해 완료 여부에 따라 다른 버튼을 표시합니다.

4. 더 복잡한 조건과 반복

• v-else-if: v-if와 함께 사용하여 다중 조건을 처리할 수 있습니다.
• v-for의 인덱스: v-for에서 index를 사용하여 현재 반복 횟수를 알 수 있습니다.
• 객체 반복: v-for는 객체를 반복할 때 in 대신 of를 사용하여 key와 value를 함께 반복합니다.
• 필터링: computed 속성을 사용하여 데이터를 필터링하고, 필터링된 결과를 템플릿에 전달할 수 있습니다.

728x90

5. 추가 팁

• 컴포넌트 분할: 복잡한 템플릿은 작은 컴포넌트로 분할하여 관리성을 높일 수 있습니다.
• slot: 부모 컴포넌트에서 자식 컴포넌트의 내용을 커스터마이징할 수 있습니다.
• scoped CSS: 컴포넌트 스타일을 지역적으로 관리하여 스타일 충돌을 방지할 수 있습니다.

결론

Vue.js 템플릿의 조건문과 반복문은 데이터에 따라 동적으로 UI를 생성하는 데 필수적인 기능입니다. 다양한 디렉티브와 함께 활용하면 복잡한 UI 로직도 간결하게 구현할 수 있습니다. 이 글에서 소개한 내용을 바탕으로 Vue.js 개발을 더욱 효율적으로 진행하시길 바랍니다.