[React] 돔(DOM)과 가상돔(Virtual DOM)

카운터 예제로 가상DOM 공부하기

1. 여러 번 호출했는데, 한 번만 숫자가 증가하네.. 이전 값을 참조 하지를 않오🥲

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const handlerClick = () => {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  };
  return (
    <>
      <h1>Count: {count}</h1>
      <button onClick={handlerClick}>클릭</button>
    </>
  );
}

export default App;

• 가상 DOM 특징은 중복된 함수를 호출하면 여러번 호출되더라도 한 번만 증가됩니다.

 

2. 리액트의 가상 DOM 작동 원리

리액트는 이전과 새로운 가상 DOM 트리를 비교하여 변경된 부분만 실제 DOM에 반영함으로써, 성능을 최적화합니다.

1. 초기 렌더링:
   • 컴포넌트가 처음 렌더링될 때, 리액트는 컴포넌트의 렌더링 결과를 기반으로 가상 DOM을 생성합니다. 이 가상 DOM은 메모리에 존재하는 가벼운 자바스크립트 객체로, 실제 DOM을 나타냅니다.
2. 업데이트 과정:
   • 상태(state)나 속성(props)이 변경될 때마다, 리액트는 새로운 가상 DOM을 생성합니다. 이 새로운 가상 DOM은 변경된 상태나 속성을 반영합니다.
3. 비교 (Diffing):
   • 리액트는 변경 전의 가상 DOM과 새로운 가상 DOM을 비교합니다. 이를 "diffing" 과정이라고 합니다.
   • 이 비교 과정에서 변경된 부분만을 식별합니다.
4. 패치 (Reconciliation):
   • 비교 결과를 바탕으로, 실제 DOM에 최소한의 변경만을 적용합니다. 이는 실제 DOM 조작이 비용이 많이 드는 작업이기 때문에, 최소한의 변경을 통해 성능을 최적화하기 위함입니다.

 

3. 여러 번 호출해서 카운트 증가시키기 - 이전 값을 참조 O

• 방법은 상태 관리 변수 함수의 내부 콜백함수를 이용하는 겁니다.
• 콜백함수는 내부적으로 상태 관리 변수를 관리하는 값을 state로 전달합니다. setCount는 count 값을 내부적으로 참조합니다.

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const handlerClick = () => {
    setCount((prev) => {
      console.log(prev);
      return prev + 1;
    });
  };

  return (
    <>
      <h1>Count: {count}</h1>
      <button onClick={handlerClick}>클릭</button>
    </>
  );
}

export default App;

콘솔로그로 확인 시 변경 전인 상태 값을 내부적으로 참조하고 있음을 볼 수 있어요.