Virtual DOM과 CRP

⚛️ Key Features of React

1. Component-based UI
   React breaks the UI into reusable components, making your code more modular and maintainable.
2. Easy to implement UI updates
   React allows you to update the view declaratively based on the state, making UI updates intuitive.
3. Fast rendering
   React is optimized for speed using techniques like the Virtual DOM, minimizing direct DOM manipulation.

---

🌐 Critical Rendering Path (CRP)

The Critical Rendering Path is the sequence of steps the browser takes to convert HTML, CSS, and JavaScript into pixels on the screen.

Here’s a simplified flow:

HTML → DOM  
CSS  → CSSOM  
DOM + CSSOM → Render Tree  
→ Layout  
→ Paint  
→ Composite → Screen

React optimizes this by minimizing reflows and repaints using the Virtual DOM.

                   | --> html --> dom ---------⬊
** network   | -------------> javascript --> render --> paint             

                   | --> css  --> cssom -------⬈

---

⚛️ Virtual DOM in React

React doesn’t update the real DOM directly. Instead, it:

1. Applies changes to a Virtual DOM (a lightweight JS object).
2. Compares it with the previous Virtual DOM (diffing).
3. Updates only the changed parts in the real DOM (reconciliation).

---

💡 Example

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;

Only the number inside <p> is re-rendered when the state changes, thanks to the Virtual DOM diffing algorithm.