state as a snapshot

state as a snapshot

state는 읽고 쓸 수 있는 일반 javascript 변수처럼 보일 수 있는데 state는 snapshot처럼 동작한다.

설정 상태 트리거 렌더링

클릭과 같은 사용자 이벤트에 대한 응답으로 사용자 인터페이스가 직접 변경된다고 생각할 수 있다. React에서는 이 모델과 약간 다르게 동작한다. 인터페이스가 이벤트에 반응하려면 state를 업데이트해야한다.

렌더링은 시간에 따라 스냅샷을 찍는다.

렌더링은 React가 함수인 컴포넌트를 호출한다는 것을 의미한다. 해당 함수에서 반환하는 JSX는 시간에 따른 UI의 스냅샷과 같다. props,이벤트핸들러, 로컬변수는 모두 렌더링 당시의 state를 사용하여 계산된다.

리액트가 컴포넌트를 다시 렌더링할 때:
1. React는 함수를 다시 호출한다
2. 함수는 새 JSX 스냅샷을 반환한다
3. React는 반환한 스냅샷과 일치하도록 화면을 업데이트한다.

컴포넌트는 해당 렌더링의 state값을 사용하여 계산된 JSX의 새로운 소품 및 이벤트 핸들러 세트와 함께 UI의 스냅샷을 반환한다.

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>
    </>
  )
}

따라서 위의 경우 setNumber가 3번 호출되는데 값의 변경은 1번 발생한다. 이 코드의 경우 number의 상태는 항상 0이므로 상태를 1로 세번 설정한다.