개발을 위한 정리 공간

12월 16일

React, Vue, Vanlla. js 각각의 대해서 정리하기

Vanilla JavaScript

: 프레임워크나 라이브러리 없이 순수 JavaScript 로만 작성된 코드

주요 특징
- React 나 Vue처럼 가상 DOM을 사용하지 않기 때문에 수동으로 DOM을 조작해야한다.
- 별도의 추가 라이브러리가 없어서 빠르지만, 코드 관리가 어려울 수 있다.
- 어떤 구조로든 코드를 작성할 수 있다.

예시

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>Vanilla JS Counter</title>
</head>
<body>
  <div>
    <h1 id="counter">카운터: 0</h1>
    <button id="increaseBtn">증가</button>
  </div>

  <script>
    let count = 0; // 상태를 관리하는 변수
    const counter = document.getElementById("counter");
    const button = document.getElementById("increaseBtn");

    button.addEventListener("click", () => {
      count += 1; // 상태 업데이트
      counter.textContent = `카운터: ${count}`; // 직접 DOM 업데이트
    });
  </script>
</body>
</html>

document.getElementById : DOM 요소를 가져와서 수동으로 이벤트 추가
상태가 바뀌면 직접 DOM 업데이트

React(페이스북에서 개발)

: 컴포넌트 기반 UI 라이브러리

주요 특징
- 컴포넌트 : UI를 작은 단위(컴포넌트)로 나누어 재사용 가능
- 가상 DOM : DOM 업데이트를 최적화해 성능이 빠름
- 단방향 데이터 흐름 : 데이터가 한 방향으로만 흘러 코드가 명확함
- 선언적 : 어떤 결과를 원하는지 코드로 명확하게 표현

예시

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>카운터: {count}</h1>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
};

export default Counter;

useState 를 사용해 상태관리를 한다.
버튼을 클릭하면 setCount로 상태 업데이트를 하고 UI가 자동 렌더링한다.

Vue.js

: Progressive 프레임워크로, React보다 배우기 쉽고 문법이 간결

Progressive 프레임워크 란?
- 점진적으로 기능을 확장할 수 있는 프레임워크
- 점진적 : 처음에는 작게 시작해서 기능과 구조를 확장해서 큰 프로젝트에 사용할 수 있다는 의미
주요 특징
- 양방향 테이터 바인딩 : 데이터가 변경되면 UI가 자동으로 바뀌고, 반대도 가능
- 단순한 문법 : HTML과 비슷하여 배우기 쉬움
- 컴포넌트 기반 : React와 비슷하게 UI를 재사용 가능한 컴포넌트로 나눌 수 있음
- 선언적 템플릿 : 코드가 HTML처럼 명확하게 작성됨

예시

<template>
  <div>
    <h1>카운터: {{ count }}</h1>
    <button @click="increment">증가</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count += 1;
    },
  },
};
</script>

**data()**를 통해 상태를 정의하고, **{{ count }}**로 템플릿에 출력
@Click 은 Vue의 이벤트 바인딩 문법으로 클릭 시 Increment 메서드를 실행

요약

특징	React	Vue.js	Vanilla JS
작성 방식	JSX(HTML + JavaScript)	HTML 템플릿 기반	순수 JavaScript와 HTML
데이터 바인딩	단방향 데이터 바인딩	양방향 데이터 바인딩	직접 DOM 업데이트
DOM 업데이트	가상 DOM 사용 (성능 최적화)	가상 DOM 사용 (최적화)	수동으로 DOM 수정
재사용성	컴포넌트 기반 구조	컴포넌트 기반 구조	코드 중복 많음

바인딩 (Binding)이란?

데이터와 화면(UI)를 연결 ➡️ 화면에 표시될 데이터를 코드로부터 가져와 화면에 자동으로 반영하는 과정
1. 데이터 바인딩 (Date Binding) ➡️ 코드와 UI 간 데이터 연동
  - **데이터(코드)와 UI(화면)**를 서로 연결하는 방법
  - 데이터와 화면의 일관성을 유지
  - 데이터를 수정하면 화면도 자동으로 업데이트되게 함
  1. 단방향 데이터 흐름 (One-Way Data Binding) ➡️ React의 {name} 사용
  - **코드 → 화면(UI)**으로 데이터가 전달
  - 데이터가 변경되면 화면이 자동으로 바뀌지만, 화면에서 데이터를 바꿔도 코드에 영향 ❌
  1. 양방향 데이터 바인딩 (Two-Way Data Binding) ➡️ Vue의 v-model 사용
  - 코드 ↔ 화면(UI) 양쪽에서 서로 영향을 줌
  - 화면에서 사용자가 값을 변경하면 데이터도 함께 업데이트
2. 직접 DOM 업데이트 (No Binding) ➡️ Vanilla JS에서 innerHTML 수정
  - 데이터를 화면에 표시하려면 직접 DOM 요소를 선택해서 수정
  - 순수 JavaScript에서 사용