ReactJS/개념정리
[React] render
xowoony
2023. 3. 6. 16:09
학습일 : 2023. 03. 06
<!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");
let counter = 0;
// 카운트업 함수
function countUp() {
counter = counter + 1;
render(); // 함수 호출 (UI 바로 반영을 위함)
}
// 랜더 함수를 따로 생성 => 위에서 호출할 용도
function render() {
ReactDOM.render(<Container />, root);
}
const Container = () => (
<div>
<h3>Total Clicks : {counter}</h3>
<button onClick={countUp}>Click Me</button>
</div>
);
render();
</script>
</html>
UI 에 바로 반영을 하기 위해서
랜더 render();
를 따로 해주지 않고 더 편리한 방법이 있다고 하는데
그게 무엇일지?
카운트업 함수 생성 후 UI에 바로 반영하기