1. vanila js를 이용한 구현
<!DOCTYPE html>
<html>
<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의 body에 span과 button이 있고 밑에 js에 어떤 동작을 하는지 입력되어 있다.
2. ReactJS를 이용한 구현
바닐라js를 사용했을 때처럼 html을 직접 쓰지 않아도 된다.
리액트가 interactive하게 해주고 리액트돔이 리액트의 element를 html에 넣어준다. render이라는 것은 리액트 element를 html로 가져와서 보여준다는 의미이다.
자바스크립트를 이용해 element를 생성하고 리액트js가 그것을 html로 번역한다.
잘 안쓰는 방법
<!DOCTYPE html>
<html>
<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",
{onMouseEnter: () => console.log("mouse enter")},
"Hello"
);
const btn = React.createElement(
"button",
{onClick: () => console.log("button")},
"Click me"
);
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);
</script>
</html>html에서는 div태그 (id ='root')만 있다.
reactjs에서는 그 안에서 무슨 일이 일어날지를 결정해 준다.
getElementById로 root가 어딨는지를 찾는다.
createElement로 h3와 btn을 생성한다.
container로 묶어주고 reactDom으로 이용하여 container를 root에 render 시킨다.
html로 만들어서 사용자에게 보여주는 것!!
이것은 바닐라js와는 정반대이다. 바닐라js는 html을 만들고 이를 자바스크립트로 가져와서 작업했다면 리액트는 자바스크립트로 만든 후 이를 html로 보여주는 것이다.
3. jsx
createElement를 대체할 방법이며 html과 유사한 형태를 띈다. 그렇기에 직관적으로 이해하기가 쉽다.
babel을 사용하여 브라우저가 이해할 수 있는 형태로 바꿔주어야 한다.
하나의 태그로 감싸져 있어야 하며 js값을 이용하려면 {}를 사용한다.
<!DOCTYPE html>
<html>
<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</h3>);
const Button = () => (<button onClick={() => console.log("button")}>Click me</button>);
const Container = () => (<div><Title/> <Button/></div>);
ReactDOM.render(<Container/>, root);
</script>
</html>화살표 함수
const Button = () => (<button onClick={() => console.log("button")}>Click me</button>);일반 함수
function Button() {
return (
<button onClick={() => console.log("button")}>Click me</button>
);
}태그와의 구분을 위해 대문자로 써야한다는 것을 잊지 말자!!
개발데분꿈나무🌳
https://www.youtube.com/watch?v=f2mMOiCSj5c
여기 보면 리액트가 어떻게 JSX를 만드는지에 대해서 더 잘 알수있어요ㅎㅎ