리액트 소개: 가상 DOM과 선언적 프로그래밍 이해하기

React의 기본 철학과 탄생 배경

리액트(React)는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리입니다. 기존의 제이쿼리(jQuery)나 바닐라 자바스크립트 방식은 DOM을 직접 찾아 조작하는 명령형(Imperative) 프로그래밍이었습니다.

반면, 리액트는 "화면에 무엇(What)이 보여야 하는가"를 선언하는 선언적(Declarative) 프로그래밍 방식을 채택했습니다. 상태(State)가 변경되면 리액트가 알아서 DOM을 업데이트합니다.

명령형 vs 선언적 프로그래밍 비교

❌ 명령형 (Vanilla JS)

"버튼을 찾고, 클릭 이벤트를 달고, 텍스트를 'Clicked!'로 바꾼다"

const button = document.getElementById('btn');
button.addEventListener('click', () => {
    button.innerText = 'Clicked!';
});

⭕ 선언적 (React)

"상태(clicked)에 따라 버튼 텍스트가 이렇게 보여야 한다"

import { useState } from 'react';

function App() {
  const [clicked, setClicked] = useState(false);
  
  return (
    
  );
}

가상 DOM (Virtual DOM) 이란?

리액트는 실제 DOM을 조작하기 전에, 메모리상에 가상의 DOM 트리를 만듭니다. 상태(State) 변경이 발생하면 새로운 가상 DOM을 생성하고, 이전 가상 DOM과 비교(Diffing)하여 실제 변경된 부분만 브라우저 DOM에 반영(Patch)합니다. 이를 통해 느린 실제 DOM 조작을 최소화하고 렌더링 성능을 극대화합니다.

Real DOM vs Virtual DOM 비교

가상 DOM의 패치(Patch) 과정

새로운 가상 DOM에서 빨간색으로 표시된 변경점만 찾아 실제 브라우저 DOM에 한 번에 업데이트(Patch)합니다.