<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
const root = document.querySelector("#root");
let counter = 0;
function countUP() {
counter = counter + 1;
render();
}
function render() {
ReactDOM.render(<Container />, root);
}
const Container = () => (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={countUP}> Click me </button>
</div>
);
render();
</script>
</html>
 |
* JSX의 변수 전달 방식
vanila : span.innerText= `Total Click: ${counter}`; // span의 text를 바꿔줌
JSX : Total clicks: {counter} // 변수만 연결하여 바꿔줌
* render() 함수
마지막 줄에만 render()가 들어갈 경우 초기화면에서 업데이트가 이뤄지지 않아
카운터 후 render() 추가하여 화면을 업데이트 해줘야 한다.
React가 좋은이유
바닐라 자사스크립트를 사용할 경우 노드정보가 바뀔때마다 노드트리를 처음부터 다시 생성. 리액트는 가상돔을 사용하여 변경된 부분만 수정하고 모든 업데이트가 끝나면 일괄로 실제 돔에 전달한다. 프론트엔드는 최적화가 가장 중요하다. 즉, 리액트는 바뀐 변수만 업데이트하지만 바닐라의 경우 모든 정보를 업데이트하는 방식이다. very very good!
| React | Vanilla |
 |
 |
| "total clicks: " "29" 변수값이 변경 되면 "29" 부분만 업데이트된다. |
<body> <span> Total Click: 6 변수값이 변경 되면 <body> ~ 내용까지 전부 업데이트된다. |
반응형
'프론트엔드 > react' 카테고리의 다른 글
| React (4) - Set State, Modifier, Auto Render #2 (0) | 2023.04.18 |
|---|---|
| React (4) - Set State, Modifier, Auto Render (1) | 2023.04.18 |
| React (2) - React Event 동작 #2 (JSX) (0) | 2023.04.17 |
| React (2) - React Event 동작 #1 (0) | 2023.04.17 |
| React (1) - React 기본 (0) | 2023.04.17 |
