1. before React
우리는 지금까지 자바스크립트를 이용해서 프로그램을 짜왔다.
단점으로는 너무 번거롭다는 것이다. 계속 handle해야하고, 요소를 가져와야하고,,,
그래서 react와 js의 차이점을 알아보겠다.
먼저 HTML로 짠 JS
<!DOCTYPE html>
<html lang="en">
<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>2 Events in React
ReactJS의 파워는 기존의 HTML을 만들고, 찾아서 가져오고, 업데이트 하는 방식이 아닌, ReactJS에게 업데이트 해야하는 HTML을 업데이트 하라고 할 것임.
즉 기존 방식: HTML -> JS
React: JS -> HTML (자바스크립트로 element를 생성하고 ReactJS가 HTML로 번역)
-
먼저 ReactJS와 ReactDOM 코드를 import 해야함
"https://unpkg.com/react@17/umd/react.development.js"
React Element 생성, eventListner 생성,, 등
"https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"
React Element들을 가져다가 HTML로 변환 -
body에 비어있는 div 생성 (유일한 HTML)
이는 ReactDOM이 ReactElement를 가져다 놓을 곳임
사용법은 ReactDOM.render(React element, div이름) 함수를 사용 -
React.createElement를 사용해서 요소를 생성(원리를 위해 이번만 사용)
들어갈 내용은 어떤 element, 어떤 property, 어떤 contents -
eventListner을 사용하지 않고 바로 on+event 이렇게 사용함.
=> 즉 property안에 eventListener을 등록할 수 있다는게 파워풀한 것임.
ReactJS
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.development.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", // HTML과 동일한 태그를 집어넣고
{
onMouseEnter: () => console.log("mosue enter")
}, // 태그 안에 들어갈 Property를 정할 수 있고
"Hello I am span");
const btn = React.createElement(
"button",
{
onClick: () => console.log("im clicked"),
},
"click me")
const container = React.createElement(
"div",
null,
[h3, btn])
ReactDOM.render(container, root);
</script>
</html>3 JSX
앞선 코드에서 더 간편하게 코드를 짜기 위해 createElement를 대체할 수 있는 방법(JSX)을 배워본다.
이런 녀석들
const h3 = React.createElement(
"h3", // HTML과 동일한 태그를 집어넣고
{
onMouseEnter: () => console.log("mosue enter")
}, // 태그 안에 들어갈 Property를 정할 수 있고
"Hello I am span");
const btn = React.createElement(
"button",
{
onClick: () => console.log("im clicked"),
},
"click me")JSX는 자바스크립트를 확장한 문법으로 보통의 HTML과 비슷
따라서 JSX를 사용하면 createElement가 HTML과 비슷한 방식으로 짤 수 있음.
VS상에는 아래와 같이 적고 bable을 사용해서 변환을 한다.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.development.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("mosue enter")}>
Hello I am title
</h3>
);
const Button =(
<button
style = {{
backgroundColor: "tomato"
}}
onClick={() => console.log("Im clicked")}
>
Click me
</button>
);
const container = React.createElement("div",null,[Title, Button])
ReactDOM.render(container, root);
</script>
</html>이번에는 여기있는 dreateElement를 지워보려고 함
const container = React.createElement("div",null,[Title, Button])이렇게 변경
const container = <div>
<Title />
<Button />
</div>대신 각 element들을 함수로 바꿔줘야지 저렇게 쓸 수 있음
const Title = () => (
<h3 id = "title" onMouseEnter={() => console.log("mosue enter")}>
Hello I am title
</h3>
);
const Button = () => (
<button
style = {{
backgroundColor: "tomato"
}}
onClick={() => console.log("Im clicked")}
>
Click me
</button>
); 결과물
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.development.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("mosue enter")}>
Hello I am title
</h3>
);
const Button = () => (
<button
style = {{
backgroundColor: "tomato"
}}
onClick={() => console.log("Im clicked")}
>
Click me
</button>
);
const Container = () => <div>
<Title />
<Button />
</div>
ReactDOM.render(<Container />, root);
</script>
</html>