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