출처: React doc
rendering이란?
“Rendering” means that React is calling your component, which is a function.
Its props, event handlers, and local variables were all calculated using its state at the time of the render.
When React re-renders a component:
1. React calls your function again.
2. Your function returns a new JSX snapshot.
3. React then updates the screen to match the snapshot you’ve returned.
👉 새로운 snapshot은 re-rendering되기 전까지 불변인 상태로 남아있다.
useState가 snapShot인 이유
<button onClick={() => {
setNumber(number + 1);
setNumber(number + 1);
setNumber(number + 1);
}}>+3</button>Here is what this button’s click handler tells React to do:
setNumber(number + 1): number is 0 so setNumber(0 + 1).React prepares to change number to 1 on the next render.
setNumber(number + 1): number is 0 so setNumber(0 + 1).React prepares to change number to 1 on the next render.
setNumber(number + 1): number is 0 so setNumber(0 + 1).React prepares to change number to 1 on the next render.
👉 event handler가 발생 했을 때 현시점(snapshot)의 number를 기준으로 값을 변경.
setNumber가 3번 호출 됐어도 현시점(snapshot)의 number는 0이기 때문에 number는 1이 되게 된다.
