[React] State as a Snapshot

스냅샷으로서의 state

state 변수는 일반 JavaScript 변수처럼 보이지만 실제로는 스냅샷처럼 동작한다. state 변수를 설정해도 이미 가지고 있는 state 변수는 변경되지 않고, 대신 리렌더링이 실행된다.

학습 내용

• state 설정으로 리렌더링이 촉발되는 방식
• state 업데이트 시기 및 방법
• state를 설정한 직후에 state가 업데이트되지 않는 이유
• 이벤트 핸들러가 state의 ‘스냅샷’에 액세스하는 방법

Setting state triggers renders

• state를 설정하면 렌더링이 촉발된다.
• 인터페이스가 이벤트에 반응하려면 state를 업데이트해야 한다.
• 즉, state 변수에 대한 set(설정자) 함수를 호출하면 렌더링이 촉발된다.
  • set(설정자) 함수로 state 변수 값을 변경하고 새 렌더링을 큐에 대기시킨다.
  • React는 새로운 state 변수 값에 따라 컴포넌트를 다시 렌더링한다.

Rendering takes a snapshot in time

• 렌더링은 그 시점의 스냅샷을 찍는다.
• 렌더링(Rendering): React가 컴포넌트, 즉 "함수를 호출한다"는 뜻이다.
• 해당 함수에서 반환하는 JSX는 시간상 UI의 스냅샷과 같다.
• prop, 이벤트 핸들러, 로컬 변수는 모두 렌더링 당시의 state를 사용해 계산된다.

React가 컴포넌트를 리렌더링할 때

1. React가 함수를 다시 호출한다.
2. 함수가 새로운 JSX 스냅샷을 반환한다.
   1. React에게 state를 업데이트하도록 명령
   2. React가 state값을 업데이트
   3. React가 state값의 스냅샷을 컴포넌트에 보냄
3. 그러면 React가 반환한 스냅샷과 일치하도록 화면을 업데이트한다.

import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(number + 1);
        setNumber(number + 1);
        setNumber(number + 1);
      }}>+3</button>
    </>
  )
}

• 위 컴포넌트의 버튼을 입력하면 1씩 증가한다. 왜일까?
• state를 설정한 것은 다음 렌더링에 대해서만 변경된다.
  • 첫 번째 렌더링에서 number는 0. 따라서 해당 렌더링의 onClick 핸들러에서 setNumber(number+1) 가 호출된 후에도 number의 값은 여전히 0이다.
  • 따라서 위의 set(설정자) 함수는 다음과 같다.

setNumber(0 + 1);
setNumber(0 + 1);
setNumber(0 + 1);

state 변수의 값은 이벤트 핸들러의 코드가 비동기적이더라도 렌더링 내에서 절대 변경되지 않는다. 해당 렌더링의 onClick 내에서, number의 값은 계속 0이다. 이 값은 컴포넌트를 호출해 React가 UI의 "스냅샷을 찍을" 때 "고정"된 값이다.

 

React는 하나의 렌더링 이벤트 핸들러 내에서 state 값을 "고정"으로 유지한다. 따라서 코드가 실행되는 동안 state가 변경되었는지 걱정할 필요가 없다.

Recap

• state를 설정하면 새 렌더링을 요청한다.
• React는 컴포넌트 외부에 마치 선반에 보관하듯 state를 저장한다.
• ‘useState’를 호출하면 React는 해당 렌더링에 대한 state의 스냅샷을 제공한다.
• 변수와 이벤트 핸들러는 리렌더링해도 “살아남지” 않는다. 모든 렌더링에는 자체 이벤트 핸들러가 있다.
• 모든 렌더링(과 그 안에 있는 함수)은 항상 React가 그 렌더링에 제공한 state의 스냅샷을 “보게” 된다.
• 렌더링된 JSX에 대해 생각하는 것과 같이, 이벤트 핸들러에서 state를 정신적으로 대체할 수 있습니다.
• 과거에 생성된 이벤트 핸들러는 그것이 생성된 렌더링 시점의 state 값을 갖는다.