REACT 리액트 DOM

리액트에서 말하는 DOM이란?

▶ DOM(Document Object Model)은 HTML, XML 문서의 프로그래밍 인터페이스로, 문서의 구조화된 표현을 제공하고 프로그래밍 언어가 문서 구조를 변경할 수 있게 해줍니다. DOM은 문서의 각 요소를 객체로 표현하며, 개발자는 이 객체를 통해 문서의 내용을 동적으로 수정할 수 있습니다. 리액트(React)에서 DOM과 관련된 몇 가지 주요 개념에 대해 좀 더 알아볼까요?

1. 실제 DOM (Real DOM)

▶ 실제 DOM은 브라우저가 HTML 문서의 코드를 읽고 해석하여 구조화된 데이터로 변환하는 트리 구조의 객체 모델입니다. 이 때 HTML 문서의 각 태그는 DOM 트리의 구성 요소가 되며, 이를 노드라고 하는데 노드는 부모-자식 관계를 가집니다. 하지만 실제 DOM을 사용할 경우 조작이 비교적 느릴 수 있으며, 특히 많은 변화를 한 번에 처리해야 하는 경우 성능이 떨어지는 문제가 발생할 수 있습니다. 때문에 기상 DOM을 이용하여 작업을 수행하게 되는데 아래에서 이에 대해 좀 더 설명드리도록 하겠습니다.

2. 가상 DOM (Virtual DOM)

▶ 가상 DOM(Virtual DOM)은 리액트와 같은 프레임워크에서 효율적으로 UI 업데이트를 관리하기 위해 사용되는 개념으로, 쉽게 말하자면 실제 DOM의 가벼운 복사본이라 할 수 있습니다. 가상 DOM은 메모리 내에 존재하며, 실제 DOM과는 독립적으로 작동합니다.

가상 DOM의 장점

▶ 가상 DOM을 사용하는 주요 이유는 성능 최적화때문인데 가능한 이유는 아래와 같이 가상 DOM이 제공하는 몇 가지 주요 장점 때문입니다.

1. 업데이트 효율성

   가상 DOM은 변경된 부분만 실제 DOM에 반영하므로, 전체 DOM을 다시 렌더링하는 대신 최소한의 변경만 적용합니다.

2. 브라우저 리플로우(Reflow) 최소화

   브라우저의 리플로우와 리페인트(Repaint) 과정을 줄여, 성능 저하를 방지합니다.

3. 명확한 상태 관리

   가상 DOM을 통해 상태 변화를 명확하게 관리할 수 있으며, 복잡한 UI 상태 업데이트를 간편하게 처리할 수 있습니다.

가상 DOM의 동작 과정

▶ 그렇다면 가상 DOM은 어떤 방식으로 동작하는지 과정과 예시를 살펴보겠습니다.

1. 컴포넌트 상태 변경

   리액트 컴포넌트의 상태나 속성이 변경되면, 리액트는 해당 컴포넌트의 render 메서드를 호출하여 새로운 가상 DOM 트리를 생성합니다.

2. 새로운 가상 DOM 트리 생성

   변경된 상태를 반영한 새로운 가상 DOM 트리를 메모리에 생성합니다.

3. 비교(Diffing)

   새로운 가상 DOM 트리와 이전 가상 DOM 트리를 비교합니다. 리액트는 효율적인 비교 알고리즘(주로 “Reconciliation” 알고리즘)을 사용하여 두 트리 간의 차이점을 빠르게 찾아냅니다.

4. 패칭(Patching)

   리액트는 변경된 부분만 실제 DOM에 반영합니다. 이 과정을 통해 성능을 최적화하고, 불필요한 DOM 조작을 최소화합니다.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

• 위의 예시는 버튼을 클릭할 때마다 count 상태가 변경되고, 리액트는 다음과 같은 과정을 거치도록 설정되었습니다.
• 상태 변경: setCount 함수 호출로 인해 count 상태가 변경됩니다.
• 새로운 가상 DOM 트리 생성: 변경된 상태를 반영하여 새로운 가상 DOM 트리가 생성됩니다.
• 비교(Diffing): 이전 가상 DOM 트리와 새로운 가상 DOM 트리를 비교하여, 변경된 텍스트 노드(You clicked {count} times)를 찾아냅니다.
• 패칭(Patching): 변경된 텍스트 노드만 실제 DOM에 반영합니다

이렇게 오늘은 리액트(React)의 장점과 단점에 대해 알아봤는데요,
면접에서도 충분히 나올 수 있는 질문인만큼 미리 공부해두면 좋을 것 같네요! 그렇다면 저는 다음에 또다른 면접에 대비한 내용을 들고오도록 하겠습니다 😁!