<!DOCTYPE html>
<html>
<head></head>
<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);
// 위 line에서 undefined와 함수 하나를 얻게 됨
// 이때 undefined는 데이터이고 함수는 그 데이터를 바꾸기 위한 함수
const onClick = () => {
// setCounter(counter + 1);
// 어떤 값을 부여하던 modifier함수는 그 값으로 업데이트하고 리렌더링 함
setCounter((current) => current + 1); // 이게 더 좋은 방법
};
console.log("rendered");
console.log(counter);
return (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>
modifier 함수를 가지고 state(setCounter)를 변경할 때 react에 의해 컴포넌트(function)가 재생성됨
(새로운 값을 가지고 리렌더링)
코드가 실행되는 과정 :
1. 버튼을 누르면 counter가 1이 됨
2. console.log(1), Total clicks: 1이 됨
3. 이는 컴포넌트 자체가 재생성 된 것임
4. 데이터(setCounter)가 바뀔때마다 컴포넌트를 리렌더링하고 UI를 refresh하는 것
바닐라 js를 대체
HTML요소를 생성하거나 찾을 필요 X
이벤트 리스너를 더해줄 필요 X
UI 업데이트 필요 X
-> return 안에서 HTML을 바로 생성해버렸고,
거기에서 바로 이벤트 리스너를 더해줬고,
UI를 업데이트 하면 자동으로 리렌더링 됨
state를 바꾸는 2가지 방법
1. setCounter을 이용해서 원하는 값을 넣어주는 것
2. 이전 값을 이용해서 현재 값을 계산하는 것 ( 함수를 사용하는 것이 좋음 )
https://nomadcoders.co/react-for-beginners
ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders
React for Beginners
nomadcoders.co
728x90
'React' 카테고리의 다른 글
| [ReactJS] 리엑트 프로그램 생성 하는 법 (0) | 2023.02.09 |
|---|---|
| [ReactJS] 프로젝트 생성 / useEffect / CleanUp (0) | 2023.01.25 |
| [ReactJS] 단위 변환기 만들기 (1) | 2023.01.20 |
| [ReactJS] react_chap3.0 (1) | 2023.01.20 |
| [ReactJS] react_chap2 (1) | 2023.01.20 |