728x90
반응형
<!DOCTYPE html>
<html>
<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 clicks: {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>App() 이 실행하게 되면 rendering 과정을 거치게 되면서 counter에 0을 넣고 rendering
onClick() 함수가 연결 된 button을 클릭하게 되면 이전counter와 현재 counter의 참조 값을 비교해서 참조값이 다르면 rerendering.
2. State Function
.state function을 사용하는 방법에는 2가지가 존재한다.
1. 값을 직접 전달하는 방법
setCounter(counter + 1)
-->
2. 함수를 전달하는 방법
setCounter((current) => current + 1)
--> 확실한 현재값을 전달해 줄 수 있음
공부한 내용을 바탕으로 이해한 것을 그대로 적은 공부일기장입니다!
틀리거나 잘못 이해한 부분이 있다면 지적해주시면 감사하겠습니다😆
728x90
반응형
'Frontend > React.js' 카테고리의 다른 글
| [React] Key를 사용하는 이유 :: Each child in a list should have a unique "key" prop (0) | 2023.12.15 |
|---|---|
| [ReactJS로 영화 웹 서비스 만들기] #3.2 setState part Two (0) | 2023.06.19 |
