memo) React - modifier
<!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);
}
return (
<div>
<h3>Total clikcs: {counter}</h3>
<button onClick={onClick}> Click me </button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>
React.useState() 배열에서
보통 데이터에는 counter처럼 내가 원하는대로 적고
function(f)은 set 뒤에 해당 데이터 이름을 붙임 (예시: setCounter)
어떤 값을 부여하던 setCounter 함수는 그 값으로 업데이트하고 리렌더링을 발생시킨다!
- counter라는 데이터를 받음
- return()에 그 데이터를 담고 있음 (리턴은 사용자가 보게될 컴포넌트)
- 버튼이 클릭되면 counter값을 바꿔줄 함수 호출 -> setCounter
- counter의 새로운 값을 가지고 counter 함수를 호출
- 그 새로운 값은 setCounter(counter + 1)에 써준 counter + 1
console.log("불꽃남자 정대만"); 🏀❤