버튼을 만들고 클릭하면 클릭 횟수를 세어주는 간단한 기능을 두 가지 방법을 사용해서 만들어보자
기존 VanillaJS 사용
<!DOCTYPE html>
<html lang="en">
<head>
</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>
ReactJS로 element를 생성하여 사용
리액트JS를 좀 더 본질적으로 이해하기 위해서 현업에서는 사용하지 않는 어려운 방식을 우선 사용해보자.
리액트JS를 사용하기 위해서는 react와 react-dom을 import한 뒤 실행시켜야 한다.
react는 js의 라이브러리이고 react-dom은 모든 react element를 HTML body에 둘 수 있도록 해주는 패키지다.
우리는 react로 element를 생성하고 생성한 element를 react-dom을 통해 렌더링시킬 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const h3 = React.createElement(
"h3",
{
id: "sexy-span",
style: { color: "red" },
onMouseEnter: () => console.log("mouse enter"),
},
"Hello im a span"
);
const btn = React.createElement(
"button",
{ onclick: () => console.log("clicked") },
"Click me"
);
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);
</script>
</html>바닐라js는 HTML을 먼저 만들고 JS로 가져와서 HTML을 수정하는 방식이었다면
리액트js는 JS에서 먼저 만들고 나중에 HTML에 뿌리는 방식이다. 유저에게 보여지는 내용을 쉽게 컨트롤 할 수 있다.
ReactJS의 JSX를 사용
JSX는 js 확장 문법이다.
JSX로 앞서 사용했던 createElement( ) 대신 좀 더 간단한 방법으로 element를 만들 수 있다.
브라우저에 JSX가 호환될 수 있게 하려면 Babel을 설치한다.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
const Title = () => (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello Im a title
</h3>
);
const Button = () => (
<button
onClick={() => console.log("im clicked")}
style={{ backgroudColor: "tomato" }}
>
Click me
</button>
);
const container = (
<div>
<Title/>
<Button/>
</div>
);
ReactDOM.render(container, root);
</script>
</html>JSX는 어플리케이션을 작은 컴포넌트 단위로 나눠 관리를 편리하게 한다. 컴포넌트를 만들 땐 반드시 대문자로 시작해야 한다.
Title 과 Button을 컴포넌트화시키고 container에 렌더링한다.
'Tech > ReactJS' 카테고리의 다른 글
| [React 기초] Props (0) | 2022.05.20 |
|---|---|
| [React 기초] State (0) | 2022.05.20 |
| [React] 그래프 데이터베이스 (0) | 2021.07.16 |
| [React] 액션과 리듀서 (0) | 2021.07.16 |
| [React] 리덕스 개념 / 기초 (0) | 2021.07.16 |
