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

1. 리액트 소개: 가상 DOM과 선언적 프로그래밍

과거에는 자바스크립트로 화면을 업데이트할 때, 문서 객체 모델(DOM)을 직접 찾아서 수정하는 명령형(Imperative) 방식을 사용했습니다. 이는 애플리케이션 규모가 커질수록 관리하기 어렵고 성능이 저하되는 원인이 되었습니다.

리액트(React)는 가상 DOM(Virtual DOM)과 선언적(Declarative) 프로그래밍이라는 두 가지 핵심 무기를 통해 이 문제를 해결했습니다. 개발자는 '화면이 어떻게 보여야 하는지' 상태(State)만 선언하면, 리액트가 가장 효율적인 방법으로 화면을 그려줍니다.

💡 핵심 비유: 설계도와 건축가

명령형 프로그래밍(기존 JS): "벽돌을 10cm 올리고, 시멘트를 2번 발라라"처럼 건축 과정을 일일이 지시하는 방식입니다.
선언적 프로그래밍(리액트): "나는 이런 모양의 2층 집(설계도)을 원해"라고 선언만 하면, 뛰어난 건축가(Virtual DOM 알고리즘)가 알아서 가장 빠르고 안전하게 집을 지어주는 방식입니다.

⚡ Real DOM vs Virtual DOM 아키텍처

📋 Real DOM과 Virtual DOM 특징 비교

특징	Real DOM	Virtual DOM
업데이트 방식	느림 (매번 화면을 처음부터 다시 그림)	빠름 (메모리에서 변경점만 찾고 한 번에 반영)
성능 제어	개발자가 직접 최적화 코드를 짜야 함	리액트 엔진이 알아서 최적화 (Batching)
메모리 소모	상대적으로 적음	가상 돔 트리를 메모리에 유지해야 하므로 더 높음

<div class="app-container">
  <h2>명령형 vs 선언적 UI 비교</h2>
  
  <div class="compare-section">
    <!-- 바닐라 자바스크립트용 컨테이너 -->
    <div id="vanilla-root" class="box">
      <h3>바닐라 JS (명령형)</h3>
      <div id="vanilla-content">
        <p>상태: <span id="vanilla-status">오프라인</span></p>
      </div>
      <button id="vanilla-btn">상태 전환하기</button>
    </div>

    <!-- 리액트용 컨테이너 (실제로는 브라우저 단독 실행이 안되지만 개념적 시뮬레이션입니다) -->
    <div id="react-simulation-root" class="box">
      <h3>리액트 (선언적)</h3>
      <div id="react-content">
        <!-- JS 로직에 의해 그려집니다 -->
      </div>
      <button id="react-btn">상태 전환하기</button>
    </div>
  </div>
</div>

🔒 localhost:8000/preview

1. 리액트 소개: 가상 DOM과 선언적 프로그래밍

💡 핵심 비유: 설계도와 건축가

⚡ Real DOM vs Virtual DOM 아키텍처

📋 Real DOM과 Virtual DOM 특징 비교

특징	Real DOM	Virtual DOM
업데이트 방식	느림 (매번 화면을 처음부터 다시 그림)	빠름 (메모리에서 변경점만 찾고 한 번에 반영)
성능 제어	개발자가 직접 최적화 코드를 짜야 함	리액트 엔진이 알아서 최적화 (Batching)
메모리 소모	상대적으로 적음	가상 돔 트리를 메모리에 유지해야 하므로 더 높음