다음 코드의 흐름을 살펴보자
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<!-- How to import React(engine) -->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<!-- How to import React-dom(put elements into HTML) -->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<!-- How to make browser read JSX syntax (using babel)-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
// cnt
let cnt = 0;
// countUp() -> counting cnt
function countUp() {
cnt += 1;
// rerender
rerender();
}
// *** rerender! -> we should call it again to update our UI ***
function rerender() {
ReactDOM.render(<Container />, root);
}
const Container = () => (
<div>
<h3>Total clicks: {cnt}</h3>
<button onClick={countUp}>Click me</button>
</div>
);
// initial render
ReactDOM.render(<Container />, root);
</script>
</html>이 코드는 HTML을 사용자가 버튼을 누를 때 마다 클릭한 횟수를 사용자에게 보여주게 만든다.
중요한 것은 코드의 흐름인데,
정의한 함수들은 실행되지 않는 한 JS는 무시하고 내려간다.
최초의 render은 initial render.
이 때의 cnt 값은 0을 갖는다.
그리고 이상태에선 아무리 버튼을 눌러도 내부에 cnt만 올라갈 뿐
UI 상에서의 변화는 없다.
따라서 이를 반영해 주기 위해선 rerendering 즉 다시 render을 하는 과정이 필요하다
이것이 function rerender()과, countUp()을 하는 순간 이를 호출하는 것이다.
기억하자 rerender()이 없으면 UI는 변하지 않는다.
또한 리액트가 대단한 점은, rerendering 시점에서
Container 전부를 rerendering 하는 것이 아니라
바뀌는 부분 즉, 이곳에서는 cnt부분만 rerendering 한다는 것이다.
'FrontEnd > React' 카테고리의 다른 글
| [ReactJS] input, form (0) | 2023.01.07 |
|---|---|
| [ReactJS] React.useState() (0) | 2023.01.07 |
| [ReactJS] JSX 문법 (0) | 2023.01.05 |
| [ReactJS] JSX 문법과 babel 설치하기 (0) | 2023.01.05 |
| [ReactJS] React에서 EventLister 구현하기 (0) | 2023.01.04 |
