1. vanilla vs react
: 버튼을 클릭하면 숫자가 증가되는 간단한 이벤트 구현
(1) vanilla
<!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>
*이벤트 등록하기 위한 과정 : 4단계
- 태그 작성
- 태그 아이디 부여
- script로 아이디 불러와 변수에 저장
- 변수에 이벤트 리스너 추가
(2) react
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script>
const root = document.getElementById("root");
const title = React.createElement(
"h3",
{
id : "title",
onMouseEnter : () => console.log('mouse enter')
},
"im h3"
)
const button = React.createElement(
"button",
{
onClick : () => console.log('im clicked'),
style : {backgroundColor : "tomato"}
},
"Click me"
)
const container = React.createElement("div", null, [title, button]);
ReactDOM.render(container, root)
</script>
</html>
*이벤트 등록하기 위한 과정
- react.js로 엘리먼트 생성 후 태그 명, 이벤트 (각종 props 정의 가능), innerText입력
- react dom으로 html 업데이트
=> vanilla.js와 비교했을 때 코드가 굉장히 간결해지고 가독성이 높아짐.
(3) 차이점
vanilla는 HTML를 먼저 만들고 그걸 Javascript로 가져와서 HTML을 업데이트.
react는 Javascript가 먼저 시작 되고 HTML이 업데이트 됨. 이게 React.js의 핵심.
* Javascript > create element > update html
'SPA > React' 카테고리의 다른 글
| React Router (0) | 2022.11.21 |
|---|---|
| React Effect Hook (0) | 2022.11.07 |
| React Props 그리고 vue에는 없는 신기한 함수 (0) | 2022.11.01 |
| React State (0) | 2022.10.26 |
| JSX 문법 (0) | 2022.10.19 |