[React] React와 기존 방식 차이점 - DOM 조작 vs 가상 DOM

---

 

vanilaJS에선 document.createElement()를 사용해 직접 DOM을 조작해야 합니다.

 

반면, React는 가상 DOM을 이용해 더 효율적으로 UI를 렌더링할 수 있고, 추가로 JSX를 사용하면 코드를 더욱 직관적이고 가독성 좋게 작성할 수 있습니다. !

 

이번 포스팅에서는 동일한 버튼을 만들면서, Vanilla JS → React → JSX로 발전하는 과정을 비교해보겠습니다! 🧐

---

✔️ 기존 방식

1. document.createElement() 사용해 DOM을 직접 생성한다.

2. 기존 DOM 요소의 ID를 가져와서, 해당 요소에 새로운 요소를 추가한다.

 

→ ❌ DOM 변경 시 직접 조작해야 해서 비효율적

const btn = document.createElement("button");

btn.textContent = "Click me!";
btn.addEventListener("click", () => {
  console.log("Good!");
});

document.getElementById("root").appendChild(btn);

 

---

✔️ React 방식

1. 기존 DOM 요소를 ID로 찾아 React의 root로 설정한다.

2. 직접 DOM을 생성하지 않고, 가상 DOM을 비교하여 업데이트한다.

 

→ ✔️ React가 DOM을 효율적으로 업데이트
→ ❌ 코드가 길고 가독성이 떨어짐

const element = React.createElement(
      "button",
      { onClick: ()=>  console.log("Good!"); },
      "Click me!"
    )
  );

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(element);

 

---

✔️ React JSX 방식

→ 🔥 코드가 짧고, 가독성이 좋으며, 유지보수가 쉽다.

function App() {
  return <button onClick={() => console.log("Good!")}>Click me!</button>;
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

---