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

📌스냅샷으로서의 State

State 변수는 읽고 쓸 수 있는 일반 자바스크립트 변수처럼 보일 수 있습니다. 하지만 state는 스냅샷처럼 동작합니다. state 변수를 설정하여도 이미 가지고 있는 state 변수는 변경되지 않고, 대신 리렌더링이 발동됩니다.

해당 내용은 리액트 공식문서의 스냅샷으로서의 State 카테고리에서 첫번째 문단에서 발췌한 것이다.

state를 설정하면 React에 리렌더링을 요청한다는 것은 알고 있을 것이다. 여기서 요점은 렌더링은 그 시점의 스냅샷을 찍는다는 것이다.

📌스냅샷(snapshot)이 뭔데?

스냅샷(Snapshot)이란 "순간"을 포착한 것.
해당 순간의 정보를 기억하고 있는 것이라고 이해하면 편하다.

“렌더링”이란 React가 컴포넌트, 즉 함수를 호출한다는 뜻이다. prop, 이벤트 핸들러, 로컬 변수는 모두 렌더링 당시의 state를 사용해 계산된다.

사실 말로만 들으면 이해가 어려울 수 있기에 예시 코드로 설명을 해보고자 한다.

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

버튼 클릭 시 한 번에 이전 상태에 3이 더해진게 나타날거라 생각할 수도 있다. 하지만 코드를 실행해보면 1만 더해지는 것을 알 수 있다.

🧐WHY?

setNumber(number + 1)를 세 번 호출했지만, 이 렌더링에서 이벤트 핸들러에서 number는 항상 0이므로 state를 1로 세 번 설정한다. 이것이 이벤트 핸들러가 완료된 후 React가 컴포넌트 안의 number 를 3이 아닌 1로 다시 렌더링하는 이유이다.

렌더링에서 number state 변수는 0이므로 이벤트 핸들러는 다음과 같다.

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

즉, 랜더링 시점의 number값인 0을 스냅샷으로 찍어서 기억하고 있고, onClick 이벤트가 발생하여서 리렌더링이 발생하게 되면 스냅샷을 찍었던 시점의 상태의 값인 number값의 0을 활용하여 업데이트 해준다는 것이다.

즉시 상태를 반영하게 하려면?

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

React의 함수형 업데이트를 사용하면, 각 상태 업데이트에서 이전 상태를 정확히 참조할 수 있다. 이 방법은 상태가 업데이트될 때마다 최신 값을 보장한다.

📌Context API

Context는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터의 흐름과는 상관없이 전역적인 데이터를 다룰 때 사용한다. 전역 데이터를 Context에 저장한 후, 데이터가 필요한 컴포넌트에서 해당 데이터를 불러와 사용할 수 있다.

Prop drilling의 해결책으로 제시된다.

📌Context 사용방법

1. Context 생성하기

import { createContext } from 'react';

const ThemeContext = createContext();

createContext()를 통해 ThemeContext라는 Context 객체를 생성한다.

2. Context Provider 구현하기

// Provider 컴포넌트 생성
const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');  // 테마 상태 관리

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export { ThemeProvider, ThemeContext };

Provider는 Context에서 관리할 데이터와 함수를 전달한다

3.Context 값 사용하기 (Consumer 컴포넌트)

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeProvider';  // Context import

const ThemedComponent = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);  // Context 값 가져오기

  return (
    <div style={{ 
      backgroundColor: theme === 'light' ? '#fff' : '#333', 
      color: theme === 'light' ? '#000' : '#fff',
      padding: '20px',
      textAlign: 'center'
    }}>
      <p>현재 테마: {theme}</p>
      <button onClick={toggleTheme}>테마 변경</button>
    </div>
  );
};

export default ThemedComponent;

Context를 사용하는 컴포넌트에서 useContext를 통해 값에 접근할 수 있다.

4. Context Provider로 컴포넌트 감싸기

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from './ThemeProvider';  // Provider import

ReactDOM.render(
  <ThemeProvider>
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

이제 ThemeProvider로 컴포넌트 트리를 감싸주어야 한다. 그래야 하위 컴포넌트들이 Context에 접근할 수 있다.

📌Context를 사용하기 전에 고려할 사항

리액트 공식문서에도 언급되어 있듯이 "어떤 props를 여러 레벨 깊이로 전달해야 한다고 해서 해당 정보를 context에 넣어야 하는 것은 아니다."

1. Context는 불필요한 리렌더링을 일으킬 수 있다.

• Context에 저장된 데이터가 변경되면 Context를 사용하는 모든 하위 컴포넌트가 리렌더링된다. 데이터의 범위가 크거나 자주 변경되는 경우 성능 문제가 발생할 수 있습니다. => 불필요한 리렌더링 촉발

2. 코드 가독성 저하 및 추적 어려움

• Context를 남용하면 데이터 흐름이 명확하지 않고, 특정 상태가 어느 경로를 통해 전달되는지 파악하기 어려워진다.
• 컴포넌트 간에 상태가 암묵적으로 공유되므로, 해당 상태가 어디서 업데이트되었는지를 파악하기 어렵게 만들 수 있다.

3. 컴포넌트 재사용성 감소

• Context에 종속된 컴포넌트는 해당 Context 없이 독립적으로 사용할 수 없으므로 컴포넌트의 재사용성이 낮아질 수 있다.
• 만약 컴포넌트를 재사용하려면 다른 Context나 Provider 설정을 해야 하므로 코드가 복잡해질 수 있다.

그렇기 때문에 리액트 공식문서에서도 Context를 사용하기 전에 props로 전달하는 것을 권장하고 있고, 컴포넌트를 추출하고 JSX를 children으로 전달하는 것을 최우선적으로 고려해보아야 한다고 명시하고 있다.

📌그럼에도 불구하고, Context를 사용해야 하는 경우는?

• 테마 지정, 인증 정보, 언어 설정
  과 같이 앱 전반에 걸쳐 공유되는 값에 사용한다.

📌Virtual Dom & Reconciliation

📌Virtual Dom이란?

Virtual DOM은 실제 DOM과 같은 내용을 담고 있는 복사본이라고 생각하시면 쉽다. 복사본은 실제 DOM이 아닌 JS 객체형태로 메모리 안에 저장되어 있다. => React가 실제 DOM을 조작하지 않고도 UI를 변경할 수 있게 해준다!

Virtual DOM은 실제 DOM의 복사본이기 때문에, 실제 DOM의 모든 element과 속성을 공유한다. 차이점은 브라우저에 있는 문서에 직접적으로 접근할 수 없다는 점이다. 그렇기 때문에 화면에 보여지는 내용을 직접 수정할 수 없다는 것이다.

📌Virtual DOM을 사용하는 이유

- DOM 조작의 비용 문제
실제 DOM은 복잡한 구조를 가지며, 변경 시 브라우저가 레이아웃 재계산, 스타일 재적용, 그리고 화면 리렌더링을 수행한다.
이러한 작업은 시간이 많이 소모되며, 특히 DOM 조작이 빈번한 애플리케이션에서는 성능 저하를 유발한다.
- 효율적인 업데이트 보장
React는 Virtual DOM을 통해 변경 사항을 미리 계산하고, 최소한의 DOM 조작만 수행한다.
모든 변경을 직접 DOM에 적용하면, 매번 비싼 리렌더링 비용이 발생하지만, Virtual DOM은 필요한 부분만 업데이트한다.

📌Reconciliation

리액트는 차이(변경)가 발생한 부분만을 실제 DOM에 적용하게 된다.이 과정을 Reconciliation(재조정)이라고 한다.

렌더링 이전에 화면의 내용을 담고있는 첫번째 가상돔과 업데이트 이후에 발생할 두번째 가상돔을 비교해 정확히 어떤 Element가 변했는지를 비교한다. 이를 리액트에선 Diffing이라고 표현한다. => Diffing은 효율적인 알고리즘을 사용해 진행되기 때문에 어떤 Element에 차이가 있는지를 매우 신속하게 파악할 수 있다. cf) v16이상 부터는 React Fiber 라는 새로운  알고리즘을 적용해 기존의 Reconciliation 알고리즘에서 발생하는 애니메이팅에 대한 부분을 개선했다고 한다.