728x90
<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function App() {
const [counter, setCounter] = React.useState(0);
const onClick = () => {
//setCounter(counter + 1); //리렌더링
//counter = counter + 1
//ReactDOM.render(<App />, root)
//이걸 한번에 해준다.
//데이터가 바뀔때마다 App컴포넌트를 리렌더링하고 UI를 refresh함
setCounter((current) => current+1);
//이렇게 사용해야 더 안전하다.
//이것은 현재 값을 변경해준다고 보장을 해준다
}
console.log("rerender"); //Click누르면 이게 계속 나오니까 App컴포넌트를 리렌더링하는걸 증명할 수 있음
return (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
);
};
ReactDOM.render(<App />, root)
</script>
<div id="root">
</div>
</body>
</html>반응형
'React' 카테고리의 다른 글
| [React] create react 설치 후 (0) | 2022.11.09 |
|---|---|
| [React] props (0) | 2022.11.09 |
| [React] state3 - 분/시간, 킬로미터/마일 (0) | 2022.11.09 |
| [React] State2 (0) | 2022.11.09 |
| [React] Event, JSX (1) | 2022.11.08 |
댓글