html 기본과 react 연동

Seungsoo Lee·2022년 7월 14일

Front-End

목록 보기

1/11

index.html

title 입력

<html>
	<head>
		<title>Hello</title>
	</head>
	<body>
	</body>
</html>

이렇게 하면 웹페이지 tab 부분에 title 내용이 적히게 된다.

body 입력

<html>
	<head>
		<title>Hello</title>
	</head>
	<body>
		<h1>Hello!!</h1>
	</body>
</html>

이렇게 하면 웹페이지 화면 부분에 h1의 내용이 적히게 된다.

CSS 추가하기

<html>
	<head>
		<title>Hello</title>
		<link rel="stylesheet" href="styles.css">
	</head>
	<body>
		<h1>Hello!!</h1>
	</body>
</html>

이렇게 하면 styles.css파일의 css내용이 페이지에 적용이 된다.

DOM Container(Root DOM Node)

<html>
	<head>
		<title>Hello</title>
		<link rel="stylesheet" href="styles.css">
	</head>
	<body>
		<h1>Hello!!</h1>

		<div id="root"></div>
	</body>
</html>

React Element를 렌더링 하면 이 부분에 표시가 된다.

react 및 react component 가져오기

<html>
	<head>
		<title>Hello</title>
		<link rel="stylesheet" href="styles.css">
	</head>
	<body>
		<h1>Hello!!</h1>

		<div id="root"></div>

		<!-- react activate -->
		<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
		<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

		<!-- react component -->
		<script src="MyButton.js"></script>
	</body>
</html>

react의 js 파일을 가져오고 나중에 사용할 MyButton.js도 가져온다.

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);

아래 두줄이 react component를 DOM Container에 렌더링하는 부분

첫 화면

클릭 버튼을 눌렀을때...

Seungsoo Lee

다음 포스트