<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
<!-- ReactDom이 react element를 가져다 놓을 곳 -->
</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");
function App() {
const [counter, setCounter] = React.useState(0); //변수에 데이터를 담고
const onClick = () =>{
setCounter(counter + 1); //해당 변수에 담긴 값을 바꿈
};
return (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
); //변수를 컴포넌트에 연결
}
ReactDOM.render(<App />, root);
</script>
</html>
- State를 사용하는 방법은!!
- 변수에 데이터를 담고
- 변수를 컴포넌트에 연결하고
- 해당 변수에 담긴 값을 바꾼다 입니당 ^0^
