스냅샷으로서의 State

원문 https://ko-react-exy5xcwjj-fbopensource.vercel.app/learn/state-as-a-snapshot

State 변수는 일반 변수처럼 보이지만 스냅샷처럼 동작합니다. 값을 변경해도 기존 state는 즉시 바뀌지 않으며, 리렌더링이 발생한 후 새로운 값이 반영됩니다.

state를 설정하면 렌더링이 동작합니다

1️⃣ 이벤트가 UI를 직접 변경하지 않음

2️⃣ State 업데이트를 통해 리렌더링 요청

3️⃣ UI 변경은 state 업데이트를 통해 반영됨

https://codesandbox.io/embed/7gs8vj?view=editor+%2B+preview&module=%2Fsrc%2FApp.js&expanddevtools=1

버튼을 클릭하면 다음과 같은 일이 발생합니다.

  1. onSubmit 이벤트 핸들러가 실행됩니다.
  2. setIsSent(true)가 isSent를 true로 설정하고 새로운 렌더링을 큐에 넣습니다.
  3. React는 새로운 isSent값에 따라 컴포넌트를 다시 렌더링합니다.

렌더링은 그 시점의 스냅샷을 찍습니다.

1️⃣ **렌더링 = 컴포넌트 함수 호출**