스냅샷으로서의 State

스냅샷

: 컴포넌트가 특정 시점에 가지고 있는 state의 고정된 값

스냅샷처럼 동작한다?의 의미

1. state는 현재 렌더링 시점의 고정된 값

• React는 컴포넌트를 렌더링하면서 state 값을 가져옴

• 이때 가져온 state 값: 그 당시의 스냅샷

• 렌더링이 끝날 때까지는 이 값이 변하지 않음

2. state를 변경하면 새로운 스냅샷을 찍음

• state를 변경하는 함수(setState)를 호출 → React가 새로운 스냅샷을 찍고, 컴포넌트를 다시 렌더링

function Counter() {
  const [count, setCount] = useState(0); // 초기값 0, count = 0인 스냅샷을 찍음

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

State와 렌더링의 관계: 한눈에 보기

State란?

• React에서 컴포넌트가 현재 상태를 기억하는 값

• State는 일반 변수처럼 보이지만, React가 특별히 관리하는 데이터

렌더링이란?

• React가 컴포넌트 함수를 호출하는 과정

• React가 state나 props를 기준으로 UI를 업데이트하는 과정

• 컴포넌트 함수가 호출되면 JSX(화면을 그리는 코드)를 반환

• 이 반환된 JSX는 그 시점의 UI 스냅샷

• 컴포넌트는 React에 의해 새로 그려지는 것처럼 동작

React의 렌더링 과정

1. 컴포넌트를 호출

2. React가 컴포넌트 함수를 실행

3. JSX 반환

   • 컴포넌트 함수는 그 시점의 상태(state)와 props를 사용해 JSX를 반환

4. UI 업데이트

   • React는 반환된 JSX와 화면을 일치시키고, 이벤트 핸들러를 연결

5. 상태 변경 시 다시 렌더링

   • setState를 호출하면 React가 다시 렌더링(컴포넌트 함수를 다시 호출)

React의 State와 메모리 저장소

• 컴포넌트의 상태를 관리하기 위해 state 저장소를 사용

• React는 컴포넌트를 다시 호출(재렌더링)할 때, 이전에 저장된 state 값을 동일한 메모리 위치에서 참조

• 즉, React가 컴포넌트를 새로 호출하더라도, state는 저장소에서 불러오므로 함수 내부의 로컬 변수처럼 사라지지 않음

시간 경과에 따른 State(비동기성)

• setState나 setNumber 같은 메서드를 호출하면 상태가 즉시 업데이트되는 것이 아니라, React는 상태를 비동기적으로 업데이트!

상태 업데이트의 비동기성

• 상태를 변경하는 함수(setState, setNumber 등)는 변경된 값을 즉시 반환하지 않고, 렌더링 주기가 완료된 후 상태가 반영됨

버튼 클릭 시 상태 변화

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);  // 상태 업데이트 예약
    console.log(count);    // 상태 변경 전의 값이 출력됨
  };

  return (
    <>
      <h1>{count}</h1>
      <button onClick={increment}>Increment</button>
    </>
  );
}

상태 스냅샷

• React에서는 상태 업데이트가 즉시 반영되지 않기 때문에, 상태의 스냅샷을 사용해 이벤트가 실행될 시점의 값을 저장

• 이 스냅샷은 상태가 변경되기 전에 고정된 상태 값

import { useState } from 'react';

export default function Timer() {
  const [time, setTime] = useState(0);

  const handleClick = () => {
    setTime(time + 1); // 상태 업데이트 예약
    setTimeout(() => {
      console.log(time);
    }, 1000);
  };

  return (
    <>
      <h1>{time}</h1>
      <button onClick={handleClick}>Start Timer</button>
    </>
  );
}

💡 React의 비동기적 상태 업데이트의 이유

: 성능 최적화

• React는 여러 상태 업데이트를 배치(batch) 처리하여, 불필요한 리렌더링을 최소화하고 효율적인 DOM 업데이트를 가능하게 만듬

배치 처리

• 상태 업데이트를 여러 개 한 번에 처리하고, 그 후에 한 번에 DOM을 갱신

리렌더링 최적화

• 상태가 여러 번 변경될 때마다 매번 렌더링을 하지 않고, 상태 변화가 모여서 한 번에 렌더링 됨

비동기적 상태 업데이트가 중요한 이유

• 상태가 즉시 업데이트되지 않기 때문에, 상태 값에 의존하는 코드가 있을 경우 예상과 다른 동작을 할 수 있음