React JS를 사용하는 이유?
React JS는 UI를 interactive하게 해준다!
Vanilla JS
- html 요소를 먼저 생성
- 먼저 생성한 html 요소를 JS에서 지정 및 조작
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vanilla</title>
</head>
<body>
<h3>Total clicks: 0</h3>
<button id="btn">Click me</button>
</body>
<script>
let counter = 0;
const button = document.querySelector("#btn");
const h3 = document.querySelector("h3");
function handdleClick() {
counter = counter + 1;
h3.innerText = `Total clicks: ${counter}`;
}
button.addEventListener("click", handdleClick);
</script>
</html>
React JS
- html에 직접 작성 x
- React object를 먼저 생성, ReactDOM으로 React object를 html에 작성
얻을 수 있는 효과
- React JS가 결과물인 html을 업데이트 가능 => 유저에게 보여질 내용을 컨트롤할 수 있다
<!DOCTYPE html>
<html lang="en">
<head>
<title>Begin React</title>
</head>
<body>
<div id="root"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const span = React.createElement(
"span",
{ id: "sexy-span", style: { color: "red" } },
"Hello I am a span"
);
ReactDOM.render(span, root);
</script>
</html>
addEventListner를 속성처럼 부여할 수 있음
const btn = React.createElement(
"button",
{
onClick: () => console.log("im clicked"),
},
"Click me"
);
JSX
- React 요소를 편하게, 직관적으로 작성할 수 있게 해줌
- 코드를 브라우저가 이해할 수 있게 Babel를 사용하여 변환해줘야 함
JSX 적용 전
const span = React.createElement(
"span",
{
id: "title",
onMouseEnter: () => console.log("mouse enter"),
},
"Hello I am a span"
);
const btn = React.createElement(
"button",
{
onClick: () => console.log("im clicked"),
style: {
backgroundColor: "tomato",
},
},
"Click me"
);
JSX 적용 후
const Title = (
<span id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello I am a span
</span>
);
const Button = (
<button
onClick={() => console.log("im clicked")}
style={{
backgroundColor: "tomato",
}}
>
Click me
</button>
);
Babel
- JSX를 브라우저가 이해할 수 있도록 babel-standalone 설치
- 기존 script 타입을 "text/babel"로 지정
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.22.9/babel.min.js"></script>
<script type="text/babel">
...
</script>
Container 안에 컴포넌트 넣기
각 컴포넌트를 모두 함수 형태로 바꿔주기 (각 컴포넌트는 대문자로 시작해야함)
const Title = () => (
<span id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello I am a span
</span>
);
const Button = () => (
<button
onClick={() => console.log("im clicked")}
style={{
backgroundColor: "tomato",
}}
>
Click me
</button>
);
아래 형태로 넣어주기 (각 컴포넌트는 대문자로 시작해야함, 소문자로 사용할 경우 기존의 태그로 인식)
const Container = () => (
<div>
<Title />
<Button />
</div>
);
ReactDOM.render(<Container />, root);