선언적 UI (Declarative UI) 와 가상 DOM (Virtual DOM)

🧩 레고 블록에 비유해서 쉽게 설명해드릴게요.

---

1. 선언적 UI (Declarative UI) 란?

"내가 원하는 결과만 말하면, 컴퓨터가 알아서 만들어주는 마법!"

📖 예시로 이해하기

• 명령형 (옛날 방식):
  "레고 집을 지어줘! 1. 파란 블록을 3개 쌓아 → 2. 빨간 블록을 옆에 붙여 → 3. 노란 블록을 지붕에 올려"
  → 개발자가 모든 단계를 직접 지시해야 함 (힘들어요 😫)
• 선언형 (React 방식):
  "레고 집을 지어줘! 최종 모습은 이 사진처럼"
  → 개발자는 최종 결과만 설명하면, React가 알아서 조립 (편리해요 😎)

💡 핵심:

• "어떻게(How)"가 아니라 "무엇(What)"을 정의합니다.
• 상태(State)가 변하면 UI가 자동으로 업데이트됩니다.

---

2. 가상 DOM (Virtual DOM) 이란?

"진짜 레고 집과 똑같은 미니어처 모형!"

📖 예시로 이해하기

1. 진짜 DOM (Real DOM): 실제 웹 페이지의 구조 (레고 집 본체)
   → 변경할 때마다 전체를 다시 짜야 해서 느림 🐢
2. 가상 DOM (Virtual DOM): 진짜 DOM의 가벼운 복사본 (미니 레고 모형)
   → 변경 사항이 생기면 미니 모형에서 먼저 수정해보고, 바뀐 부분만 진짜에 반영 🚀

💡 동작 원리:

1. React는 UI의 가상 복사본을 메모리에 만듭니다.
2. 상태가 변경되면, 가상 DOM과 진짜 DOM을 비교합니다.
3. 바뀐 부분만 찾아서 진짜 DOM에 업데이트합니다.
   → "전체를 다시 그리지 않아서 빠르다!"

---

3. 둘이 어떻게 함께 동작하나요?

1. 선언적 UI: "버튼을 누르면 빨간색으로 변해주세요!" 라고 결과만 지정
2. 가상 DOM: 버튼 색상 변경 시, 전체 페이지가 아닌 버튼만 업데이트

👉 마치 레고 전문가가

• "최종 모습은 이렇게!" 라고 말하면 (선언적)
• 미니 모형으로 수정해보고 필요한 부분만 실제 레고에 적용 (가상 DOM)

---

4. 실제 코드 예시

// 선언적 UI: "count 값에 따라 숫자를 보여줘!"
function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

• 버튼을 누르면 → count 상태 변경 → React가 가상 DOM 비교 후 실제 DOM 업데이트

---

🌟 정리

1. 선언적 UI: "무엇"을 원하는지 말하면 React가 처리 (편리함)
2. 가상 DOM: 변경 사항을 빠르게 반영 (성능 향상)
3. 결과: 개발자는 로직에 집중하고, React가 최적화된 업데이트를 해줍니다!

이제 "선언적 UI"와 "가상 DOM"이 레고 마법사 같은 React의 비밀이라는 걸 알겠죠? 🪄