create-next없이 연동하는 방법
- index.html
<html>
<head>
<title>Suri의 블로그</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Suri의 블로그에 오신 것을 환영합니다!!</h1>
<!-- DOM Container(Root DOM Node) 추가 -->
<div id="root"></div>
<!-- 리액트 가져오기 -->
<script
src="https://unpkg.com/react@17/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
crossorigin
></script>
<!-- 리액트 컴포넌트 가져오기 -->
<script src="MyButton.js"></script>
</body>
</html>- MyButton.js
function MyButton(props) {
const [isClicked, setIsClicked] = React.useState(false);
return React.createElement(
"button",
{ onClick: () => setIsClicked(true) },
isClicked ? "Clicked!" : "Click Here!"
);
}
// 리액트 돔에 렌더 함수를 사용해서 리액트 컴포넌트를 돔 컨테이너에 렌더링
// 스크립트 태그를 사용해 컴포넌트를 가져왔다고해도 컴포넌트가 화면에 보이는 것이 아니기 때문에 필요
const domContainer = document.querySelector("#root");
ReactDOM.render(React.createElement(MyButton), domContainer);
기억이 안되면, 기록을 -