Front-end/React
[React] HTML 코드에 직접 리액트 연동
K_EY
2023. 5. 17. 20:02
HTML 코드에 직접 리액트 연동
- 화면에 Hello World! 표시
- Click here이라고 적힌 버튼 생성
- 버튼을 클릭하면 Clicked로 변경되도록 함
1. DOM Container(Root DOM Node) 추가
- virtual DOM의 시작점인 DOM Container를 <body> 태그 내에 추가
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Hello world!</h1>
<!-- DOM Container 추가 -->
<div id="root"></div>
</body>
</html>
2. 리액트와 리액트 컴포넌트 가져오기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Hello world!</h1>
<!-- DOM Container 추가 -->
<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>
3. 리액트 컴포넌트 제작
- 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);
4. 실행
