~2.4까지의 강의
버튼 만드는 것 부터 바닐라JS와 차이가 난다.
vanilla.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}`; //업데이트 html
}
button.addEventListener("click",handleClick); //클릭이벤트 감지
</script>
</html>#1과 동일한 코드
버튼 만들고 따로따로 해줘야 한다.
React.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>
const root=document.getElementById("root");
const h3 = React.createElement(
"h3",
{
id:"title",
onMouseEnter: ()=> console.log("mouse enter"),
} ,
"Hello, I'm a span"
);
const btn = React.createElement(
"button",
{
onClick:()=>console.log("i'm clicked"),
style:{
backgroundColor:"tomato",
},
},
"Click me"
);
const container = React.createElement("div", null,[h3,btn]);
ReactDOM.render(container,root);
</script>
</html>createElement에 html 선택(h3, button, div 등)하고 이벤트 등록하면 버튼이 생성된다.
-> 앞으로 안 쓰지만 그래도 알아두기는 할 것!
처음에 들었을 때는 뭔 소리야;; 했는데 확실히 이해하면서 들으니까 html보다 훨씬 더 간편하다는 것을 깨닫는 중..
'Web Service > React' 카테고리의 다른 글
| [영화 웹 서비스 만들기] #4. setState (0) | 2022.03.19 |
|---|---|
| [영화 웹 서비스 만들기] #3. JSX (0) | 2022.03.14 |
| [영화 웹 서비스 만들기] #1. 바닐라JS와 리액트JS의 비교 (0) | 2022.03.14 |
| [nextjs-blog] #3. Pre-rendering and Data Fetching (0) | 2022.01.11 |
| [nextjs-blog] #2. Assets, Metadata, and CSS (0) | 2022.01.10 |
댓글