📘 [Recat] React를 사용하는 이유: Vanilla JS와의 비교

2025년 04월 01일 in Dev / Frontend on #React #Web

[React] React를 사용하는 이유: Vanilla JS와의 비교

웹 개발을 처음 시작했을 때 대부분은 순수한 JavaScript로 DOM을 제어하고 이벤트를 다루며 UI를 구성합니다.
이 방식을 흔히 Vanilla JS라고 부르죠. 저 역시 처음에는 이 방식으로 충분하다고 생각했습니다. 하지만 프로젝트가 점점 복잡해지고 UI의 동적 요소가 많아질수록 한계가 드러났습니다.

그 과정에서 제가 선택한 도구가 바로 React입니다.
이 글에서는 React를 왜 사용하게 되었는지, Vanilla JS와 비교하면서 정리해 보겠습니다.

🔍 1. DOM 제어 방식의 차이

Vanilla JS는 HTML 요소를 선택해서 직접 조작합니다.

document.getElementById('title').innerText = 'Hello World';

이 방식은 간단하지만, 상태가 자주 바뀌는 UI에는 굉장히 비효율적입니다. 매번 DOM을 찾아서 바꾸는 반복이 필요하기 때문입니다.

React는 Virtual DOM을 사용하여 변경된 부분만 효율적으로 갱신합니다.

const [title, setTitle] = useState('Hello World');
return 

상태가 바뀌면 해당 컴포넌트가 자동으로 리렌더링되며, 실제 DOM에는 필요한 부분만 업데이트됩니다.

🧩 2. 컴포넌트 기반의 구조화

Vanilla JS에서는 UI의 각 부분을 함수로 분리하거나 재사용하기 어렵습니다. 반복되는 HTML 구조를 복붙하거나, 문자열로 innerHTML을 처리하게 됩니다.

React에서는 UI를 컴포넌트 단위로 쪼개고 재사용할 수 있습니다.

function Button({ text }) {
  return <button>{text}</button>;
}

이런 컴포넌트 기반 구조는 유지보수와 확장에 매우 유리합니다.

🔄 3. 상태 관리의 편의성

Vanilla JS로 상태를 관리하려면 전역 변수와 복잡한 이벤트 처리가 필요합니다.

let count = 0;
function increment() {
  count++;
  document.getElementById('counter').innerText = count;
}

React에서는 useState를 사용하여 상태를 간단하게 관리할 수 있습니다.

const [count, setCount] = useState(0);
return (
  <div>
    <p>{count}</p>
    <button onClick={() => setCount(count + 1)}>증가</button>
  </div>
);

변수 관리, 화면 갱신, 이벤트 연결 모두 하나의 구조 안에서 깔끔하게 관리됩니다.

🚀 4. UI 복잡성 대응

웹 앱의 규모가 커지면 페이지마다 수십, 수백 개의 DOM 요소와 이벤트가 뒤섞이게 됩니다. Vanilla JS에서는 각 상태와 요소를 연결하고 추적하는 데 많은 코드와 복잡도가 필요합니다.

React는 상태 기반 렌더링과 컴포넌트 구조 덕분에 UI가 복잡해져도 명확한 구조를 유지할 수 있습니다.

🌐 5. 생태계와 확장성

React는 단순한 라이브러리를 넘어선 풍부한 생태계를 자랑합니다.

Next.js → 서버 사이드 렌더링, SEO 지원
React Router → 클라이언트 사이드 라우팅
Redux, Zustand → 복잡한 상태 관리
Tailwind, styled-components → 다양한 스타일링 방법
반면, Vanilla JS로는 이런 기능을 직접 구현하거나 외부 라이브러리를 매번 따로 연동해야 합니다.

📝 명령형과 선언형 프로그래밍 차이

명령형(Imperative)과 선언형(Declarative) 프로그래밍의 차이는 “어떻게(How) 처리할지를 직접 명시하느냐(명령형)” vs “무엇(What)을 할지를 선언하느냐(선언형)”로 요약됩니다.

실생활로 예시

명령형 : 강남역 지하철에서 내려서 500m 직진해서 사거리에서 좌회전 50m 직진
선언형 : 서울특별시 서초구 강남대로 444길

React는 대표적인 선언형 프로그래밍 라이브러리입니다. 아래에 같은 동작을 명령형 vs 선언형으로 구현한 예시를 보여드릴게요.

✅ 예시: 버튼 클릭 시 리스트에 아이템 추가하기

🔻 명령형 방식 (Vanilla JS)

<!DOCTYPE html>
<html>
<body>
  <ul id="list"></ul>
  <button onclick="addItem()">Add Item</button>

  <script>
    let count = 1;
    function addItem() {
      const ul = document.getElementById('list');
      const li = document.createElement('li');
      li.textContent = 'Item ' + count++;
      ul.appendChild(li);
    }
  </script>
</body>
</html>

➡️ 어떻게 DOM을 조작할지 하나하나 지시하는 방식입니다.

🔺 선언형 방식 (React)

import { useState } from 'react';

function ItemList() {
  const [items, setItems] = useState([]);

  const addItem = () => {
    setItems([...items, `Item ${items.length + 1}`]);
  };

  return (
    <div>
      <ul>
        {items.map((item, i) => <li key={i}>{item}</li>)}
      </ul>
      <button onClick={addItem}>Add Item</button>
    </div>
  );
}

➡️ 리스트가 어떤 상태여야 하는지만 선언하고, React가 UI를 관리합니다.

명령형: 리스트를 만들고, 요소를 만들고, 그걸 DOM에 추가하는 과정을 직접 순서대로 지시함.
선언형: “리스트는 items 상태로 표현되고, 버튼을 누르면 항목을 추가한다”고 상태만 선언함.

🧠 차이 요약

구분	명령형 (Imperative)	선언형 (Declarative)
핵심 질문	어떻게 동작할지를 설명한다	무엇이 필요한지를 설명한다
개발자가 하는 일	DOM 조작을 직접 함 (절차 중심)	상태만 선언하면 React가 알아서 처리함
예: 버튼 클릭 시 리스트 추가	`createElement`, `appendChild` 등 직접 사용	`useState`로 상태 선언, JSX로 UI 표현

📌 정리

항목	Vanilla JS	React
DOM 제어	직접 수동 제어	Virtual DOM 자동 처리
UI 구성	HTML 조각 복붙	컴포넌트 기반 구조화
상태 관리	변수와 DOM 수동 연동	useState로 깔끔한 상태 처리
재사용성	거의 없음	높음
유지보수	어렵고 코드 중복 많음	구조화 쉬움
학습 난이도	쉬움	중간
확장성	제한적	매우 높음
방식	명령형	선언형

✍️ 마무리

처음에는 Vanilla JS로도 충분하다고 생각했지만,
React를 접한 이후로 개발 효율, 유지보수, 사용자 경험 모두에서 큰 차이를 느꼈습니다.

프론트엔드 개발에 관심이 있다면 React는 꼭 익혀야 할 도구라고 생각합니다.
앞으로 JSX, 훅(Hooks), 라우팅, 상태 관리 등 React의 다양한 주제로 글을 이어가 보겠습니다.

📘 [Recat] React를 사용하는 이유: Vanilla JS와의 비교

🔍 1. DOM 제어 방식의 차이

🧩 2. 컴포넌트 기반의 구조화

🔄 3. 상태 관리의 편의성

🚀 4. UI 복잡성 대응

🌐 5. 생태계와 확장성

📝 명령형과 선언형 프로그래밍 차이

실생활로 예시

✅ 예시: 버튼 클릭 시 리스트에 아이템 추가하기

🔻 명령형 방식 (Vanilla JS)

🔺 선언형 방식 (React)

🧠 차이 요약

📌 정리

✍️ 마무리

📑 Reference

Dev Study Note

Error

🔍 1. DOM 제어 방식의 차이

🧩 2. 컴포넌트 기반의 구조화

🔄 3. 상태 관리의 편의성

🚀 4. UI 복잡성 대응

🌐 5. 생태계와 확장성

📝 명령형과 선언형 프로그래밍 차이

실생활로 예시

✅ 예시: 버튼 클릭 시 리스트에 아이템 추가하기

🔻 명령형 방식 (Vanilla JS)

🔺 선언형 방식 (React)

🧠 차이 요약

📌 정리

✍️ 마무리

📑 Reference

Pagination

Templates (for web app):

Error