3장에서 등장한 <template> 요소를 보면서 Vue에서 사용되는 template, React에서 사용되는 Fragment와 연관이 있는걸까? 하는 생각이 들었어요.
결론을 먼저 말씀드리면, 비슷한 부분이 있지만 같은 것은 아니다 인데요.
이에 대한 추가적인 정보를 공유하거나 관련된 각자의 생각을 나눠볼 수 있는 시간을 갖고 싶다는 생각을 가지고 해당 내용에 대해 찾아보면서 알게 된 점들을 공유드립니다!
HTML <template> 요소
재사용 가능한 HTML 마크업을 정의하는 데 사용되는 비표준 HTML 요소
브라우저는 초기 페이지 로딩 시 내부의 콘텐츠를 렌더링하지 않음 (= 비표준 렌더링)
JavaScript를 통해 필요할 때 클론하여 문서의 특정 위치에 삽입
이 과정을 통해 동적으로 콘텐츠를 생성하고 관리
<table id="producttable">
<thead>
<tr>
<td>UPC_Code</td>
<td>Product_Name</td>
</tr>
</thead>
<tbody>
<!-- 존재하는 데이터는 선택적으로 여기에 포함됩니다 -->
</tbody>
</table>
```js
// 템플릿 엘리먼트의 컨텐츠 존재 유무를 통해
// 브라우저가 HTML 템플릿 엘리먼트를 지원하는지 확인합니다
if ("content" in document.createElement("template")) {
// 기존 HTML tbody 와 템플릿 열로 테이블을 인스턴스화합니다
var t = document.querySelector("#productrow");
// 새로운 열을 복제하고 테이블에 삽입합니다
var tb = document.querySelector("tbody");
var clone = document.importNode(t.content, true);
td = clone.querySelectorAll("td");
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
tb.appendChild(clone);
// 새로운 열을 복제하고 테이블에 삽입합니다
var clone2 = document.importNode(t.content, true);
td = clone2.querySelectorAll("td");
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
tb.appendChild(clone2);
} else {
// HTML 템플릿 엘리먼트를 지원하지 않으므로
// 테이블에 열을 추가하는 다른 방법을 찾습니다.
}
React <React.Fragment>
여러 자식 요소를 그룹화할 때 불필요한 DOM 노드를 추가하지 않고 이를 구현할 수 있게 해주는 컴포넌트
컴포넌트의 반환 값에서 하나의 래퍼 요소가 필요할 때 사용
추가적인 <div>나 다른 HTML 요소를 생성하지 않음
import React from 'react';
function Table() {
return (
데이터 1
데이터 2
데이터 3
데이터 4
);
}
// 단축 문법 사용
function TableShort() {
return (
<>
데이터 1
데이터 2
데이터 3
데이터 4
);
}
```
### Vue ``
- Vue 컴포넌트의 사용자 인터페이스(UI)를 정의
- HTML과 유사한 문법을 사용하지만, Vue의 템플릿 문법(v-if, v-for, v-bind 등)을 포함
- Vue 인스턴스의 데이터와 연동되어 자동으로 반응성을 가짐 → 데이터가 변경되면 템플릿도 자동으로 업데이트
- 빌드 시점에 JavaScript 렌더 함수로 컴파일 → 템플릿 문법이 해석, 효율적인 DOM 업데이트를 위해 최적화
```vue
{{ title }}
{{ description }}
```
### 결론
| **특징** | **HTML ``** | **React `Fragment`** | **Vue ``** |
|------------------------|------------------------------------------------------------|----------------------------------------------------|-----------------------------------------------------|
| **주요 목적** | 재사용 가능한 HTML 구조 정의 및 동적 삽입 | 여러 React 요소 그룹화, 불필요한 DOM 노드 제거 | Vue 컴포넌트의 UI 정의 및 디렉티브와 함께 그룹화 |
| **렌더링 방식** | 브라우저가 초기 로드 시 렌더링하지 않음 | 실제 DOM에 추가적인 노드를 생성하지 않음 | 디렉티브와 함께 사용 시 렌더링하지 않음, SFC에서는 렌더링됨 |
| **사용 위치** | 일반 HTML 문서 내 | React 컴포넌트 내 | Vue Single File Components(SFC) 및 디렉티브 사용 시 |
| **데이터 연동** | 없음, 순수한 HTML 구조 | 없음, 단순히 요소를 그룹화 | Vue의 반응성 데이터와 디렉티브와 밀접하게 연동 |
| **구문 및 사용 방식** | `...` | `...` 또는 `<>...` | `...` 및 디렉티브와 함께 사용 |
| **재사용성** | JavaScript를 통해 동적으로 클론 및 삽입 | 컴포넌트 내에서만 그룹화 | 여러 컴포넌트에서 재사용 가능 |
| **인터랙션** | JavaScript로 수동 제어 | React의 상태 관리와 함께 사용 | Vue의 디렉티브 및 이벤트 핸들링과 통합 |
| **추가 기능** | 클론 후 수정 가능 | `key` 속성 지원 | 조건부 렌더링, 반복 렌더링, 슬롯 등 다양한 기능 |
| **단축 문법 지원** | 아니요 | 예 (`<>...`) | 아니요 |
### 요것은 좀 별개의 얘기로 끄적끄적
맨 처음에는 이벤트 위임을 해 보았는지에 대한 경험을 공유하고 싶었는데, 관련 자료를 찾다보니 다음과 같은 내용을 찾게 되었어요.
> React는 내부적으로 이벤트 위임을 하기 때문에 별도 이벤트 위임이 필요 없다.
그래서 그냥 신기해서 마지막에 간단하게 끄적여보았습니다 희희
##### React의 이벤트 위임
- React는 합성 이벤트(Synthetic Events) 시스템을 사용하여 이벤트를 처리
- 합성 이벤트 : 모든 이벤트가 React의 합성 이벤트 시스템을 통해 처리
- 이벤트 위임 : 이벤트 리스너가 최상위 루트(예: `
`)에 단 한 번만 첨부되며, 이벤트 버블링을 통해 처리
- 퍼포먼스 최적화 : 다수의 개별 이벤트 리스너를 추가하는 대신 단일 리스너를 사용하여 성능 향상
##### Vue의 이벤트 위임
- Vue.js는 Vue의 템플릿 시스템을 통해 각 DOM 요소에 개별적으로 이벤트 리스너를 직접 첨부
- 내부적으로 이벤트 위임을 사용하지 않음. 대신 각 요소에 실제 이벤트 리스너를 배치
- React와 다르게 가상 DOM과 효율적인 업데이트 알고리즘을 통해 성능을 최적화
## 📝 Reference
- [MDN \: 콘텐츠 템플릿 요소](https://developer.mozilla.org/ko/docs/Web/HTML/Element/template)
- [React \](https://ko.react.dev/reference/react/Fragment)
- [Vue.js Template Syntax](https://ko.vuejs.org/api/built-in-special-elements.html#template)
- [Chat GPT o1-mini와 함께 찾아본 내용들](https://poe.com/s/NSlA4E5Q3LtYGEEvx6Y9)
- [React에서도 이벤트 위임을 해야할까?](https://www.harimkim.com/articles/2.%20Area/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%20%EA%B0%9C%EB%B0%9C/Web%20API%20%EC%82%AC%EC%9A%A9%EB%B2%95/%EC%9D%B4%EB%B2%A4%ED%8A%B8%20%EC%82%BC%EB%8C%80%EC%9E%A5%20%EC%BA%A1%EC%B3%90%EB%A7%81,%20%EB%B2%84%EB%B8%94%EB%A7%81,%20%EC%9C%84%EC%9E%84%EC%9D%84%20%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90#react%EC%97%90%EC%84%9C%EB%8F%84-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%9C%84%EC%9E%84%EC%9D%84-%ED%95%B4%EC%95%BC%ED%95%A0%EA%B9%8C)
🧐 Question
3장에서 등장한
<template>요소를 보면서 Vue에서 사용되는 template, React에서 사용되는 Fragment와 연관이 있는걸까? 하는 생각이 들었어요. 결론을 먼저 말씀드리면, 비슷한 부분이 있지만 같은 것은 아니다 인데요. 이에 대한 추가적인 정보를 공유하거나 관련된 각자의 생각을 나눠볼 수 있는 시간을 갖고 싶다는 생각을 가지고 해당 내용에 대해 찾아보면서 알게 된 점들을 공유드립니다!HTML
<template>요소React
<React.Fragment><div>나 다른 HTML 요소를 생성하지 않음function Table() { return (
{{ title }}
{{ description }}
와우! 저도 책 읽으면서
template태그 보자마자 Vue에 있는<template></tempalte>를 생각했거든요...ㅋㅋㅋ 찾아보려던 내용인데 이렇게 정리해주셔서 감사합니다! :D 갓민영~!!뷰 .. 언젠간 공부해주고 말겠어 ......!!!