-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathre-render.html
43 lines (37 loc) · 1.24 KB
/
re-render.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18.2.0/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");
function App() {
/*
** useState(x) **
- x 부분에 초기값 지정 가능
- const data = React.useState(0);
** 콘솔로그결과 [0, f] **
- 0은 변수값, f는 data변수 값 바꿀 때 사용하는 함수
- console.log(data);
** 구조 분해 할당 : 배열 꺼내 쓰기 **
- const box = ['pen', 'speaker', 'books']
- const [a, b, c] = box; (구조분해할당)
*/
const [counter, setCounter] = React.useState(0);
const onClick = () => {
// setCounter(counter + 1);
setCounter((counter) => counter + 1);
};
return (
<div>
<h3>Total Clicks : {counter} </h3>
<button onClick={onClick}> Click me</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>