클릭 이벤트로 알아보는 React vs 바닐라 JavaScript 핵심 차이

💭 서론

리액트로 여러개의 버튼 중 클릭하면 하나의 버튼에만 active 클래스를 추가해주는 이벤트를 구현하면서 갑자기 헷갈렸던 경험이 있다.

간단한데 바닐라 JS에서 리액트로 바뀌었을 뿐인데 헷갈리더라. 

클릭 이벤트로 active 클래스를 제어하는 방식을 기준으로 바닐라 자바스크립트와 리액트의 핵심 차이를 정리해보았다.

---

 

✅ 바닐라 JavaScript 방식

바닐라 JS에서는 DOM을 직접 선택하고 클래스를 직접 추가/제거한다.

const tabs = document.querySelectorAll(".tab");

tabs.forEach((tab) => {
  tab.addEventListener("click", () => {
    tabs.forEach((t) => t.classList.remove("active"));
    tab.classList.add("active");
  });
});

1. querySelector로 DOM을 직접 가져온다
2. addEventListener로 이벤트를 건다
3. classList.add/remove로 직접 클래스 조작한다

👉 모든 걸 직접 제어하는 “명령형 방식”

 

✅ React 방식

React에서는 DOM을 직접 건드리지 않는다.

state를 변경하고 UI는 그 상태를 기반으로 자동 반영된다.

import { useState } from "react";

function Tabs() {
  const [active, setActive] = useState("home");

  const tabs = ["home", "about", "contact"];

  return (
    <div>
      {tabs.map((tab) => (
        <button
          key={tab}
          className={active === tab ? "active" : ""}
          onClick={() => setActive(tab)}
        >
          {tab}
        </button>
      ))}
    </div>
  );
}

1. 클릭 시 setState로 상태 변경
2. active === tab 조건으로 클래스 적용
3. DOM 조작 없이 자동 렌더링

👉 상태 중심의 “선언형 방식”

 

---

 

🔥 예제 - 버튼 3개 중 하나만 active

✅ 바닐라 JavaScript

<button class="tab">home</button>
<button class="tab">about</button>
<button class="tab">contact</button>

const tabs = document.querySelectorAll(".tab");

tabs.forEach((tab) => {
  tab.addEventListener("click", () => {
    // 모든 버튼에서 active 제거
    tabs.forEach((t) => t.classList.remove("active"));

    // 클릭한 버튼에만 active 추가
    tab.classList.add("active");
  });
});

클릭할 때마다 “전체 초기화 → 선택된 것만 적용” 흐름으로 직접 처리한다.

 

✅ React

import { useState } from "react";

function Tabs() {
  const [active, setActive] = useState("home");

  return (
    <div>
      <button
        className={active === "home" ? "active" : ""}
        onClick={() => setActive("home")}
      >
        home
      </button>

      <button
        className={active === "about" ? "active" : ""}
        onClick={() => setActive("about")}
      >
        about
      </button>

      <button
        className={active === "contact" ? "active" : ""}
        onClick={() => setActive("contact")}
      >
        contact
      </button>
    </div>
  );
}

현재 선택된 값(active) 하나만 관리하면 나머지는 자동으로 정리된다.

 

🔥 핵심 차이 한눈에 보기

구분	바닐라 JavaScript	React
DOM 조작	직접	직접X
상태 관리	없음 (직접 처리)	state로 관리
클래스 변경	classList 사용	className 조건 처리

 

---

 

🧠 사고방식 차이

이 둘의 차이는 단순히 문법이 아니라 생각하는 방식 자체가 다르다.

 

바닐라 자바스크립트는

“클릭됐네?
→ 다른 애들 클래스 제거하고
→ 이 버튼에 active 붙이자”

이 과정을 하나씩 직접 실행한다.

 

반면 리액트는

“현재 선택된 값은 이거다
→ 그 값과 같은 버튼만 active다”

 

결과 상태만 정의하면 UI가 따라온다.

 

🧠 한 줄 정리

• 바닐라: “클래스를 직접 바꾼다”
• React: “상태를 바꾸면 UI가 따라온다”

 

---

🚀 마무리

처음에는 React 방식이 더 어렵게 느껴지는데 리액트 방식에 익숙해져 상태 기반으로 생각하기 시작하면 코드가 훨씬 단순해진다.

특히 탭, 메뉴, 필터 UI 같은 경우에는 선택된 값 하나만 관리한다는 패턴만 기억해도 대부분 어려움이 해결될 것 같다!