바닐라 자바스크립트 vs 리액트

바닐라 자바스크립트 vs 리액트

1. 왜 리액트를 쓰는가?

• 바닐라 자바스크립트만으로도 UI 업데이트 가능
  → 하지만 코드가 길고 복잡하며, 오류 발생이 쉽다.
• 리액트는 단순한 심상 모델(mental model)을 제공
  → 복잡한 UI와 대규모 웹앱을 훨씬 쉽게 구축할 수 있음.

---

2. 데모 비교

• 동일한 탭 전환 기능 웹앱을 두 가지 방식으로 제작:
  1. 바닐라 자바스크립트
  2. 리액트
• 바닐라 JS 버전
  • index.html → 기본 구조
  • index.js → 버튼 생성, 클릭 리스너 등록, 클릭 시 UI 업데이트
  • 탭 전환 시: 버튼에 active 클래스 추가/제거 → 리스트 동적 생성 및 삽입
  • 코드가 장황하고 단계별로 명령을 작성해야 함 (명령형 프로그래밍)
• 리액트 버전
  • index.html → <div id="root">만 존재
  • index.js → App.js를 root에 렌더링
  • App.js:
    • 자바스크립트 파일 안에 HTML 형태 코드(JSX)를 작성 가능
    • 상태 관리: useState() 사용
    • activeContentIndex라는 상태에 따라 UI 자동 업데이트
    • 선언형 코드 → 목표 UI만 정의하면 나머지는 리액트가 처리

---

3. 선언형 vs 명령형

• 명령형(바닐라 JS)
  • “무엇을 어떻게 할지”를 단계별로 지시
  • 코드가 복잡하고 오류에 취약
• 선언형(리액트)
  • “최종적으로 어떤 UI 상태가 되어야 하는지”만 정의
  • 리액트가 내부적으로 필요한 단계를 계산하고 자동으로 UI 업데이트

---

4. 핵심 포인트

• 리액트는 짧고 간결한 코드로 동적인 UI를 안정적으로 구현 가능
• 상태(state)와 조건만 정의하면 UI가 자동으로 렌더링됨
• 따라서 리액트는 복잡한 앱 개발에서 사실상 필수적인 도구

---

👉 한 줄 정리:
바닐라 자바스크립트는 명령형이라 번거롭고 복잡하지만, 리액트는 선언형으로 직관적이며 UI 업데이트를 자동으로 처리해 더 쉽고 안정적으로 웹앱을 개발할 수 있다.