반응형
useState를 사용할 때 첫번째 변수는 초기값, 두번째 변수는 값을 변경하는 함수라고 이야기 했었다.
오늘은 그 두번째, 변수의 값을 변경하는 함수 modifier에 대해서 알아본다.
setCounter(counter + 1);
위의 코드가 그냥 counter + 1 하는 거지
counter 변수값이 변경 되는 건 아니지 않나 생각했는데
const [counter, setCounter] = React.useState(0);
React.useState의 두 번째 함수 기능 자체가 첫번째 변수의 값을 변경하는 거라서
count = count + 1 로 이해하면 되는 것 같다
index.html
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.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 data = React.useState(11);
const [counter, setCounter] = React.useState(0);
const onClick = () => {
setCounter(counter + 1);
}
return (
<div>
<h3>Total Click: {counter}</h3>
<button onClick={onClick}>CLICK ME</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>반응형
'온라인 강의 > ReactJS로 영화 웹 서비스 만들기 [Nomad]' 카테고리의 다른 글
| #3.4 State Functions (0) | 2023.05.20 |
|---|---|
| #3.3 Recap (0) | 2023.05.20 |
| #3.1 setState part One (0) | 2023.05.19 |
| #3.0 Understanding State (0) | 2023.05.19 |
| #2.6 JSX part Two (0) | 2023.05.18 |