Web component는 캡슐화된 컴포넌트를 만들어 재사용이 가능할 수 있게 하는 JavaScript의 표준으로, 모든 프레임워크에서 공통으로 사용이 가능하다는 장점이 있다. 그래서 프레임워크/라이브러리의 교차 사용이 자주 발생하는 곳에서는 프레임워크 기반의 컴포넌트보다 JavaScript의 웹 컴포넌트를 사용하여 재사용성을 증가시킬 수 있다.
Web Component 사용하기
Web Component 파일의 경우에는 폴더를 별도로 만들어서 관리해야 한다. public 안에 폴더를 별도로 생성해서 관리하는 경우고 있고, util / lib 이라는 폴더를 따로 생성하여 관리하는 경우 등이 있다.
1. Web Component 생성
<<MyComponent.js>>
window.customElements.define("custom-tag", class extends HTMLElement {
connectedCallback() {
console.log("반갑습니다.")
}
disconnectedCallback() {
alert("안녕히가세요.")
}
}
);
2. Web Component Import : index.html에 웹 컴포넌트를 import한다.
<<index.html>>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<!-- 웹 컴포넌트 로드 -->
<script src="./lib/MyComponent.js"></script>
</head>
<body>
<div>
<div id="root"></div>
</div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
3. Web Component 사용: React 컴포넌트 내에서 정의한 Web Component를 사용한다. 현재 예제에서는 웹 컴포넌트의 이름을 "custom-tag"로 정의했다.
<<Comp1.jsx>>
export default function Comp1(){
return(
<custom-tag/>
)
}
MyComponent.js의 connectedCallback이 시행되는 모습을 볼 수 있다.
'Frontend > React' 카테고리의 다른 글
| React: useReducer에 대해서 (0) | 2024.09.05 |
|---|---|
| React: React에서 Styled Component 사용하기 (0) | 2024.09.04 |
| React: useEffect에 대해서 (1) | 2024.09.03 |
| React : 컴포넌트 합성이란 ? (1) | 2024.08.31 |
| React: portal에 대해서 (0) | 2024.08.29 |
| React : useRef에 대해서 (0) | 2024.08.29 |
| React: 컴포넌트에 CSS 적용하기 (1) | 2024.08.28 |
| React : props에 대해 알아보자 (0) | 2024.08.26 |