일반적인 JS를 사용해서 html 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<span>Total clicks: 0</span>
<button id="btn">Click me</button>
</body>
<script>
let counter = 0;
const button = document.getElementById("btn");
const span = document.querySelector("span");
function handleClick() {
counter = counter + 1;
span.innerText = `Total clicks: ${counter}`;
}
button.addEventListener("click", handleClick);
</script>
</html>HTML을 먼저 작성하고 거기에 JS를 사용하여 버튼 상호작용을 해서 결과를 업데이트 하는 형식이 JS를 사용한 일반적인 프론트 구성 방식이다.
React JS를 임포트해서 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
<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>
const root = document.getElementById("root");
const h3 = React.createElement(
"h3",
{
onMouseEnter: () => console.log("mouse enter"),
},
"Hello I'm a span",
);
const btn = React.createElement(
"button",
{ onClick: () => console.log("Im clicked") },
"Click me",
);
const container = React.createElement("div", null, [span, btn]);
ReactDOM.render(btn, root);
</script>
</html>HTML을 완성해 놓고 스크립트를 짜는 것이 아닌, 스크립트가 HTML을 완성해 주는 방식이다.
순서가 역전되어 있다.
또한, 리액트를 쓰면 앞에서 4줄에 할 일을 한 줄에 해결할 수 있게 된다.
React.createElement("태그", {속성, 이벤트리스너}, "내용"); 이 한줄로 끝나는 것이다.
'취업 준비 > React' 카테고리의 다른 글
| 6. Props (0) | 2022.03.08 |
|---|---|
| 5. 컴포넌트 조합하기 (0) | 2022.03.08 |
| 4. State 예제 - 시/분 변환기 (0) | 2022.03.05 |
| 3. State와 reRendering (0) | 2022.03.04 |
| 2. JSX 문법 (0) | 2022.03.04 |
