[리액트 스터디] - State as a Snapshot

State

읽고 쓴다는 점에서 JS 변수와 유사해보이지만, state를 이용하면 리렌더링을 발생시킬 수 있다.

 

State 설정하면 렌더링이 동작

사용자 이벤트가 UI가 바뀐다고 생각할 수 있는데, React의 개념에서는 state가 UI를 바꾸는거임.

 

즉, event => state 변경 => 리렌더링 개념

 

 

react.dev - CodeSandbox

 

위 예시에서 "Send"를 누르게되면 ?

 

1. onSubmit 실행

2. setIsSend(true)가 실행됨. isSent를 true로 설정하고, 새로운 렌더링을 큐에 넣음

3. React가 윙 돌면서 컴포넌트를 다시 렌더링

 

렌더링은 그 시점에 스냅샵을 찍음

렌더링, React가 함수를 호출한다는 뜻

 

즉, 함수에서 반환하는 JSX가 해당 시간의 스냅샷과 같다.

 

특정 렌더링에서 사용되는 prop, event handler, 로컬 변수 모두 해당 시점의 state를 이용하여 계산됨

 

그러고 스냅샷과 일치하게 업데이트된 스냅샷은 이벤트 핸들러를 연결하게 됨.

 

그 이벤트를 호출하게되면 JSX의 이벤트가 발동됨.

 

이 때 !!

 

React는 컴포넌트를 다시 렌더링하게됨.

 

1. React가 함수를 다시 호출함.

2. 함수가 새로운 JSX 스냅샷을 반환하고

3. 반환한 스냅샷과 일치하도록 DOM tree를 업데이트

 

 

중요한 개념 !

 

함수가 반환된 후 사라지는 일반 변수와는 다르게, state는 함수 외부에 존재함. 즉, React 자체에 "존재"함

이 state가 변경되면, React가 해당 state의 값을 이용해 새로운 JSX를 반환함.

 

react.dev - CodeSandbox

 

위의 예시에서 한 번에 3씩 증가할 거 같은데, 왤까 ?

 

첫 번째 렌더링에서 number가 0이었고, 이 값을 기준으로 +1을 한 거라 3이 아닌 1로 렌더링 됨

 

즉, state가 0 => 1 => 2 => 3 을 차례대로 setting을 한게 아니고, 0=>1 을 세번 부른거임

 

<button onClick={() => {
  setNumber(0 + 1);
  setNumber(0 + 1);
  setNumber(0 + 1);
}}>+3</button>

시간 경과에 따른 State

 

react.dev - CodeSandbox

 

위 코드의 alert은 0을 표시할거라 예상이 가능

 

 

react.dev - CodeSandbox

 

그러면 setTimeout을 걸면 ??

 

0일까 5일까 ?

 

정답은...

 

0임 !

 

alert을 할 때, 충분히 state가 변경될 수 있는데, 그 때 당시의 스냅샷을 사용하게됨 !!

 

state 변수의 값은 코드가 비동기적이더라도 절대 변경되지 않음

 

그렇기에 number + 5가 호출된 후에도 계속 0 이었던거임

 

즉, React가 UI의 "스냅샷을 찍을 때 고정" 되었던거임 !!

 

 

react.dev - CodeSandbox

 

그럼 위에서 Send 해놓고 드롭다운 값을 바꾸면 ??

 

당시의 스냅샷인 Alice가 alert에 노출됨을 예상할 수 있다.

 

---

React를 다룰 때 코드가 실행되는 동안 state가 변경되었는지를 걱정할 필요가 없다 !!

 

근데,,, 개발자가 최신 state를 렌더링 되기 전에 읽고 싶은 니즈가 있을거 같은데,,, 그건 다음 페이지에서 보자 !!

 

state 업데이트 큐 – React

---

- state를 변경하면 새 렌더링을 요청

- state는 컴포넌트 외부에 보관된다.

- useState를 호출하면, state의 스냅샷을 제공함

- 모든 렌더링의 경우엔 state의 스냅샷을 보게됨, 즉 컴포넌트 외부에 존재하는 걸 바라봄

- 이벤트 핸들러는 생성 당시의 state 값을 가짐

---

 

스냅샷으로서의 State – React

- state 변경 전 후로 state 값을 조건으로 alert을 노출 한다하더라도, 결과적으로 로직 차이는 없음

- 왜냐면 해당 렌더링의 당시의 state 값으로 고정되어 있기 때문임.

- 이 전에 렌더링된 이벤트 핸들러엔 영향을 미치지 못함

 

즉, 첫 렌더링 당시의 JSX를 이렇게 이해하면 됨

<button onClick={() => {
  setWalk(false);
  alert('Stop is next');
}}>
  Change to Stop
</button>
<h1 style={{color: 'darkgreen'}}>
  Walk
</h1>

 

---

렌더링 된 화면의 state는 그 어떤 경우에도 렌더링 시점의 값을 따른다 !!!!

 

setTimeout을 하든 이벤트 핸들러를 통해 뭔 짓을 하든