memo) React
<!DOCTYPE html>
<html lang="en">
<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");
function App() {
const [counter, setCounter] = React.useState(0);
const onClick = () => {
//setCounter(counter + 1);
setCounter((current) => current+1);
}
return (
<div>
<h3>Total clikcs: {counter}</h3>
<button onClick={onClick}> Click me </button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>state를 세팅하는 데는 2가지 방법이 있다.
1) 직접 할당 : setState(state +1)
2) 함수를 할당: setState(state => state +1) (함수의 첫번째 인자는 현재 state 이다)
현재 state랑 관련이 없는 값을 새로운 state로 하고싶은 경우에는 (1),
현재 state에 조금의 변화를 주어서 새로운 state를 주고 싶은 경우에는 (2)
console.log("불꽃남자 정대만"); 🏀❤