반응형
State란?
기본적으로 데이터가 저장되는 곳이다
React.js는 전체를 로딩하는 것이 아니라 값이 바뀐 부분만 로딩한다.
=> Interactive 하다는 뜻
데이터가 변경될 때마다 Container를 rerenddering 하는 것이 필요하다
하지만 매번 re rendering 하는 것이 효율적은 방법은 아니다
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.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;
const Title = () => (
<h3 id="title"
onMouseEnter={() => {
console.log('mouseEvent excuted')
}}>
"Hello Span" {counter}
</h3>);
const span = React.createElement(
"span",
null,
"Hello Span");
const Button = () => (
<button
style={{ backgroundColor: "red" }}
onClick={countUp}
>
Click
</button>
);
function countUp() {
console.log('count Up');
console.log(++counter);
reLoad();
}
function reLoad() {
ReactDOM.render(<Container />, root);
}
const Container = () =>
<div>
<Title />
<Button />
</div>
ReactDOM.render(<Container />, root);
</script>
</html>반응형
'온라인 강의 > ReactJS로 영화 웹 서비스 만들기 [Nomad]' 카테고리의 다른 글
| #3.2 setState part Two (0) | 2023.05.20 |
|---|---|
| #3.1 setState part One (0) | 2023.05.19 |
| #2.6 JSX part Two (0) | 2023.05.18 |
| #2.5 JSX (0) | 2023.05.18 |
| #2.4 Recap (0) | 2023.05.18 |