[React] State와 스냅샷

State를 스냅샷으로 보기

리액트의 상태 변수는 그냥 일반적인 자바스크립트 변수처럼 보이지만 상태는 하나의 스냅샷에 더 가깝다. 

setState 함수를 이용하여 상태를 업데이트하는 것은 현재의 상태를 변경시키지 않고 리렌더링을 일으킨다.

• 상태 값을 변경하는게 어떻게 리렌더링을 일으키는가?
• 언제 그리고 어떻게 상태가 업데이트 되는가?
• 왜 상태는 변경 즉시 업데이트되지 않는가?
• 이벤트 핸들러가 어떻게 상태의 스냅샷에 접근하는가?

 

State를 설정하면 렌더링을 일으킨다.

사용자가 마우스 클릭 이벤트를 일으키는 즉시 상태가 변경된다고 생각이 들 수도 있다. 하지만 리액트에서는 이런 Mental Model과는 다르게 동작한다. 인터페이스가 이벤트에 반응하려면 state를 업데이트 해야한다.

import { useState } from 'react';

export default function Form() {
  const [isSent, setIsSent] = useState(false);
  const [message, setMessage] = useState('Hi!');
  if (isSent) {
    return <h1>Your message is on its way!</h1>
  }
  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      setIsSent(true);
      sendMessage(message);
    }}>
      <textarea
        placeholder="Message"
        value={message}
        onChange={e => setMessage(e.target.value)}
      />
      <button type="submit">Send</button>
    </form>
  );
}

function sendMessage(message) {
  // ...
}

 

버튼을 클릭하면 발생하는 동작 :

1. onSubmit 이벤트 핸들러 실행.
2. setIsSent(true)가 isSent를 true로 설정, 새로운 렌더링을 큐에 추가.
3. 새로운 isSent값에 따라 컴포넌트를 리렌더링

 

렌더링시 스냅샷 이용

•  렌더링 : 컴포넌트 함수를 호출하는 것
• 스냅샷 : 컴포넌트 함수가 호출되면 리턴하는 JSX 

Props, 이벤트 핸들러, 지역 변수들이 렌더링 시점의 State 값을 기반으로 처리

리액트는 이 스냅샷과 웹페이지 화면을 일치시키기 위해 화면을 업데이트하고 이벤트 핸들러들을 연결한다.

 

리액트가 컴포넌트를 리렌더링할 때 생기는 일

1. 리액트는 컴포넌트 함수를 다시 호출
2. 컴포넌트 함수는 새로운 JSX 스냅샷을 리턴
3. 리액트는 리턴된 JSX스냅샷에 화면이 일치하도록 화면을 업데이트
4. 컴포넌트 함수 호출 -> 스냅샷 처리 -> DOM 트리 업데이트

리액트가 컴포넌트 함수를 호출할 때, 특정 렌더링 때의 State를 스냅샷 찍는다.
컴포넌트 함수는 렌더링 시점의 State 값을 사용하여 새로운 props와 이벤트 핸들러가 적용된 UI 스냅샷을 리턴.

setState 함수 호출 -> State 업데이트 -> State값의 스냅샷이 컴포넌트로 전송

 

Reference

• https://react.dev/learn/state-as-a-snapshot