React.js
리액트 설치하지 않고 사용하기
jinuk_
2023. 5. 13. 14:21
728x90
반응형
노마드코더 니꼴라스 ReactJS로 영화 웹 서비스 만들기에서
React.js를 설치하지 않고 쓰는 모습을 보았습니다.
UNPKG
UNPKGunpkg is a fast, global content delivery network for everything on npm. Use it to quickly and easily load any file from any package using a URL like:unpkg.com/:package@:version/:file Examples Using a fixed version: You may also use a semver range or a
www.unpkg.com
1. unpkg사이트에 들어가서 형식에 맞게 url을 긁어옵니다.
여기서 UNPKG, unpkg, 언패키지는
npm 패키지들을 올려둔 CDN으로 간단한 URL을 통해 사용할 수 있게 한다.
CDN이란 웹에서 사용되는 다양한 리소스를 저장하여 제공하는 시스템이다.
unpkg.com/:package@:version/:file
이런식으로 가져오시면 됩니다.
2. 저는 index.html에다가 적용하여 사용해보겠습니다.
<!-- index.html-->
<!DOCTYPE html>
<html>
<head></head>
<body></body>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
</html>
3. 잘적용이 됬는지 확인하기 위해 콘솔에 React를 입력합니다.
위와 같이 출력되면 제대로 작동하는 것입니다.
3-1. 실습하고 있는 코드도 테스트해봅니다. (꼭 밑 코드와 같지않아도 됩니다)
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const h3 = React.createElement(
"h3",
{
id: "title",
onMouseEnter: () => console.log("mouser enter"),
},
"Hello I'm a span"
);
const btn = React.createElement(
"button",
{
onClick: () => console.log("im clicked"),
style: {
backgroundColor: "tomato",
},
},
"Click me"
);
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);
</script>
</html>
728x90
반응형