인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

서랑님의 프로필 이미지

작성한 질문수

Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"

조건부 렌더링 (v-if, v-show)

template 조건부의 차별점에 대한 질문

작성

·

22

0

여러 개의 HTML 요소를 v-if로 조건부 렌더링을 하고 싶다면 template 태그로 감싸고 v-if를 사용하여 렌더링 하면 된다고 말씀해주셨는데, template 태그가 아닌 div, ul 등으로 감싸도 동일하게 작동하는 것을 확인했습니다.

 

기존 React를 사용하는 제 입장에서는 template 태그를 사용하지 않고 후자와 같은 방법으로 조건부 렌더링을 걸곤 했는데,

혹시 여러 개의 요소를 하위 요소로 담고 있는 상위 일반 HTML 태그에 v-if를 사용하는 것과, template으로 묶어 사용하는 것에 차이가 있는지 질문드립니다!

답변 2

1

짐코딩님의 프로필 이미지
짐코딩
지식공유자

Vue에서 <template>과 일반 HTML 태그(예: <div>)를 사용한 조건부 렌더링의 주요 차이점을 설명해드리겠습니다.

1. 렌더링 결과의 차이

  • <template>은 실제 DOM에 렌더링되지 않는 래퍼(wrapper) 요소입니다. 조건이 참일 때 내부 컨텐츠만 렌더링됩니다.

  • <div>나 다른 HTML 태그는 조건이 참일 때 래퍼 요소 자체도 함께 DOM에 렌더링됩니다.

예시를 통해 살펴보겠습니다:

<!-- template 사용 -->
<template v-if="condition">
  <h1>제목</h1>
  <p>내용 1</p>
  <p>내용 2</p>
</template>

<!-- div 사용 -->
<div v-if="condition">
  <h1>제목</h1>
  <p>내용 1</p>
  <p>내용 2</p>
</div>

 

렌더링 결과:

<!-- template 버전 렌더링 결과 -->
<h1>제목</h1>
<p>내용 1</p>
<p>내용 2</p>

<!-- div 버전 렌더링 결과 -->
<div>
  <h1>제목</h1>
  <p>내용 1</p>
  <p>내용 2</p>
</div>

 

2. 사용 시 고려사항

  • <template>은 불필요한 DOM 노드를 추가하지 않으므로 DOM 구조를 더 깔끔하게 유지할 수 있습니다.

  • CSS 스타일링이나 레이아웃에 영향을 주지 않습니다.

  • 반면 <div>나 다른 HTML 요소는 추가적인 스타일링이나 클래스 적용이 필요할 때 유용할 수 있습니다.

3. 성능

  • <template>은 추가적인 DOM 노드를 생성하지 않으므로 미세하게나마 메모리 사용량이 적습니다.

  • 많은 조건부 렌더링을 사용하는 대규모 애플리케이션에서는 이러한 차이가 누적될 수 있습니다.

따라서, 단순히 여러 요소를 그룹화하여 조건부 렌더링만 하려는 경우에는 <template>을 사용하는 것이 좋습니다. 추가적인 스타일링이나 이벤트 핸들링이 필요한 경우에만 일반 HTML 요소를 사용하는 것이 권장드립니다.

서랑님의 프로필 이미지
서랑
질문자

자세한 답변 정말 감사드립니다!

그렇다면 template는 React 컴포넌트에서 JSX를 return 할 때 1개의 부모 요소만 사용할 수 있어 오류가 생길 때, <></>로 묶어서 렌더링 했던 것과 동일한 기능을 한다고 이해하면 될까요?

짐코딩님의 프로필 이미지
짐코딩
지식공유자

맞습니다~! 리액트의 Fragment(<></>)와 비슷한 개념이라고 보시면 됩니다! 🙂

0

인프런 AI 인턴님의 프로필 이미지

안녕하세요, 인프런 AI 인턴입니다. 윤장호님.

Vue.js에서 여러 개의 요소를 조건부 렌더링할 때 <template v-if="">와 같은 방법을 사용하시거나, 일반 HTML 태그(예: <div>, <ul> 등)를 사용할 수 있습니다. 둘 사이의 차이점에 대해 설명드리겠습니다.

  1. 렌더링 관점에서의 차이:

    • <template v-if="">를 사용할 경우: Vue는 template 태그를 실제 DOM에 렌더링하지 않습니다. 그래서 일반 HTML 요소를 DOM에 추가하고 싶지 않을 때 사용하면 유용합니다. 이 방법은 여러 요소를 그룹화하는 데 사용되지만 실제로 화면에 보이지는 않습니다.
    • <div v-if="">, <ul v-if="">와 같은 경우: 이러한 태그는 실제로 DOM에 렌더링됩니다. 이를 사용하게 되면 해당 태그가 렌더링되어 사용자가 페이지에서 직접적으로 볼 수 있게 됩니다.
  2. 스타일링과 레이아웃의 영향:

    • <template>: 스타일이나 레이아웃상에서 영향을 미치지 않습니다.
    • <div>, <ul>: 스타일링과 레이아웃에 영향을 줄 수 있습니다. 예를 들어, CSS로 인해 추가적인 여백이나 크기 변화를 가져올 수 있습니다.

결론적으로, 어떤 방법을 사용하느냐는 특정 상황에 따라 달라지며, 필요에 따라 <template> 태그를 사용하거나, <div>, <ul>와 같은 태그를 선택하시면 됩니다.

유사한 질문이 다루어진 링크를 통해 더 자세한 정보를 얻으실 수 있습니다:
- <template v-if=“”> 관련 질문

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

서랑님의 프로필 이미지

작성한 질문수

질문하기