[React, Vue] React와 Vue의 특징, 어떤 차이점이 있을까?

 

 

 

React는 원래 많이 사용했지만
요즘들어 Vue도 많이 사용하는 추세인 것 같다!
어떤 점이 어떻게 다른지 한 번 알아보자.

 

 

 

 

 

1. DOM (Document Object Model)
먼저 DOM에 대한 이해도가 있어야 Vue와 React의 특징을 더 잘 이해할 수 있다.

• DOM은 HTML 브라우저가 이해하고 조작할 수 있도록 트리 구조 형태의 객체로 변환한 것이다.
• HTML 자체는 단순한 텍스트 파일이다.
• 자바스크립트가 웹 페이지의 텍스트를 바꾸거나 스타일을 변경하려면 HTML 요소들을 접근 가능한 객체 형태로 메모리에 올려놓아아야 하는데, 그 인터페이스가 DOM이다.
• DOM은 문제를 가지고 있다.
• 자바스크립트로 DOM을 조작하면 브라우저는 화면의 위치와 크기를 다시 계산하는 Reflow와 화면을 다시 그리는 Repaint 과정을 거친다.
• 그래서 이런 문제 때문에 React와 Vue 모두 가상 DOM(Virtual DOM)을 사용한다.
• 진짜 DOM 대신 메모리상 매우 가벼운 자바스크립트 객체 형태의 트리를 만든다.
• 데이터가 변경되면 새로운 가상 DOM을 생성하고 이전 가상 DOM과 비교하며 실제 변경된 부분만 찾아낸다.
• 변경된 최소한의 요소만 진짜 DOM에 한 번에 적용한다. -> Reflow와 Repaint를 최소화
• 이렇게 React와 Vue는 모두 Virtual DOM을 사용한다.
• 그러나 DOM을 업데이트하기 위해 변화를 감지하는 매커니즘과 DOM을 정의하는 문법에는 큰 차이가 있다.

 

 

 

---

 

 

 

 

2. React

상태를 UI로 표현하는 자바스크립트 라이브러리

• React는 웹사이트 화면을 컴포넌트로 나누어 만든 뒤, 필요한 조각만 붙여서 화면을 만드는 도구이다.
• 옛날에는 "버튼을 누르면 텍스트를 빨간색으로 바꿔라."라고 일일이 지시해야 했다.
• React는 "데이터가 성공이면 초록색, 실패면 빨간색"이라고 규칙만 정해두면, 데이터가 바뀌는 순간 알아서 화면은 변신시킨다.
• 컴포넌트 중심 사고와 Hook을 통한 로직 재사용
  React는 모든 요소를 독립적인 컴포넌트 단위로 쪼개어 개발한다. View와 로직을 완벽하게 재사용 가능한 단위로 분리한다. 특히 useState(상태를 기억하고 상태가 바뀌면 화면을 바꿈), useEffect(화면이 그려진 뒤 서버에서 데이터를 가져오거나 타이머를 설정하는 등 부수적인 작업 처리) 같은 React Hooks를 활용해 컴포넌트 안에서 상태 관리와 생명주기 제어를 간결하게 구현할 수 있다.
• 불변성 기반의 상태 감지
  React는 상태는 절대 직접 변경하지 않는다는 불변성 원칙을 따른다. useState(상태를 기억하고 상태가 바뀌면 화면을 바꿈)의 갱신 함수를 통해 아예 새로운 객체나 배열을 생성해 넘겨주어야만 React가 변화를 인지하고 가상 DOM의 비교 및 리렌더링 작업을 수행한다.
• JSX(JavaScript XML)
  React는 JSX라는 문법을 통해 HTML과 자바스크립트를 하나의 로직 안에서 결합한다. 그래서 별도의 프레임워크 전용 지시어를 배울 필요 없이 자바스크립트의 순수 문법을 사용해 UI를 제어할 수 있다.
• 단반향 데이터 흐름
  React의 데이터는 항상 부모 컴포넌트에서 자식 컴포넌트로만 흐른다. 이렇게 데이터 흐름이 한 방향으로 고정되어 있어서 앱의 규모가 커지더라도 데이터의 변화 원인을 추적하고 디버깅하기 쉽다.
• 개발자가 프로젝트 상황에 따라 라우팅, 상태 관리(TanStack Query, Redux, Zustand 등) 라이브러리를 자유롭게 조합하여 구성할 수 있어서 높은 유연성을 가진다.

 

 

Q. 라이브러리와 프레임워크의 차이점이 무엇인가요?

A. 이 둘의 가장 큰 차이는 제어권의 흐름을 누가 주도하느냐에 있다. 라이브러리는 개발자가 제어권을 가진다. 개발자가 필요한 시점에 직접 호출하는 방식으로 원하는 곳에만 자유롭게 선택해서 적용 가능하다. 그래서 자유도가 프레임워크에 비해 상대적으로 높다. 프레임워크는 프레임워크가 주도권을 가진다. 이미 프레임워크에 규칙이 있고 그거에 따라 작성하면 알아서 호출되는 방식이다. 아무래도 프레임워크가 정한 규격과 구조를 따라야하기 때문에 자유도는 상대적으로 낮은 편이다.

라이브러리의 대표적인 예시는 React, jQuery, NumPy가 있다. 그리고 프레임워크의 대표적인 예시는 Spring, Django, Next.js, Vue.js가 있다.

 

 

 

 

---

 

 

 

 

3. Vue

공식적인 틀을 제공하는 프레임워크

• Vue는 개발에 필요한 핵심 도구를 공식적으로 관리하는 프레임워크다.
• 라우팅(Vue Router), 상태 관리(Pinia), 빌드 도구(Vite) 등이 공식적인 표준으로 정립되어 있다.
• 프로젝트 구조를 고민하는 시간을 줄이고 협업 시 통일된 코드를 유지하기 쉽다.
• SFC(Single File Component)
  HTML, CSS, JS의 직관적인 분리로 Vue는 .vue라는 단일 파일 안에 <template>, <script>, <style> 영역을 명확히 나누어 작성한다. 기존 웹 개발 방식과 유사하고 코드의 역할 구분이 직관적이다.
• 반응형 시스템과 양방향 데이터 바인딩
  Vue는 자바스크립트의 Proxy 기반 반응형 시스템을 사용해서 객체의 값을 직접 수정하기만 해도 변경 사항을 자동으로 감지하고 화면을 갱신한다. v-model 지시어를 통해 양방향 데이터 바인딩을 지원하며 폼 입력값을 상태와 동기화할 때 작성해야 하는 보일러플레이트 코드(프로그램을 만들 때 최소한의 수정만 거치거나 그대로 반복해서 사용하는 필수적인 표준 코드 조각)를 획기적으로 줄여준다.
• 디렉티브를 통한 간편한 UI 제어
  Vue는 HTML 태그 안에 v-if(조건이 참일 때만 DOM에 요소를 생성), v-for(배열이나 객체 같은 데이터를 기반으로 동일한 DOM 요소를 반복하여 렌더링), v-show(DOM 요소를 항상 생성해두고 조건에 따라 CSS의 display 속성만 변경하여 화면에 숨기거나 보여줌) 같은 디렉티브를 삽입해 템플릿 제어를 처리한다. 이를 통해 HTML 구조 내에서 조건부 레더링이나 반복 출력을 직관적이고 빠르게 작성할 수 있다.
• Composition API를 통한 유연한 로직 재사용
  Vue 3부터 도입된 Composition API는 React의 Hooks와 매우 유사한 개발 방식을 제공한다. 연관된 상태와 로직을 하나의 함수 단위로 묶어 모듈화할 수 있고 앱 규모가 커지더라도 코드 재사용과 유지보수성을 높은 수준으로 유지할 수 있다.

 

 

Q. Composition API가 무엇인가?

A. Composition API는 <script setup> 태그와 ref, reactive 등의 반응형 API를 활용하여 관련 로직을 한곳에 모아 관리하는 방식이다.  <script setup>은 Composition API를 훨씬 간결하게 작성할 수 있게 해주는 문법 설탕이다. ref( )는 기본 타입의 값(숫자, 문자열 등)을 반응형으로 만들 때 사용하며, 자바스크립트 영역에서는 .value로 접근한다. 관련 있는 데이터, 메서드, 생명주기 훅을 한 공간에 묶어서 작성할 수 있어 코드 재사용성과 가독성이 높아진다.

<template>
  <div>
    <p>현재 카운트: {{ count }}</p>
    <p>2배 값: {{ doubleCount }}</p>
    <button @click="increment">증가</button>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 1. 반응형 상태 정의
const count = ref(0)

// 2. 계산된 속성 (Computed)
const doubleCount = computed(() => count.value * 2)

// 3. 메서드 정의
const increment = () => {
  count.value++
}

// 4. 생명주기 훅 (Lifecycle Hook)
onMounted(() => {
  console.log('컴포넌트가 마운트되었습니다.')
})
</script>​

 

 

 

 

---

 

 

 

 

3. React와 Vue의 차이점

• React는 자바스크립트 문법(JSX) 기반의 UI 라이브러리로 개발자의 자유도가 높다.
  Vue는 표준 HTML/CSS/JS 구조를 적극 활용하는 프레임워크로 생산성과 표준화된 구조를 제공한다.
• React는 상태를 직접 수정하지 않고 새 값으로 교체하는 불변성 원칙을 따른다.
  Vue는 데이터 수정 시 변화를 자동으로 추적하는 반응형 원칙을 따른다.
  
  
  
• 가상 DOM 작동 방식 차이
  React_ 트리 재실행과 전체 재렌더링
  - 상태가 변경되면 해당 컴포넌트 함수 전체가 다시 실행된다.
  - 컴포넌트 하위의 전체 가상 DOM 트리를 새롭게 생성한 뒤, 이전 가상 DOM 트리와 비교(Diffing)하여 달라진 차이점만 실제 DOM에 반영한다.
  - 부모가 재렌더링되면 자식 컴포넌트도 기본적으로 재렌더링된다. 불필요한 재렌더링을 막기 위해 useMemo, useCallback, React.memo 같은 최적화 기법을 직접 적용해야 한다.
  
  Vue_ 반응형 추적과 정적/동적 분리
  - Vue는 자바스크립트 Proxy를 통해 어떤 데이터가 어떤 DOM 요소에 바인딩되어 있는지 감지(의존성 추적)합니다.
  - 개발자가 const count = ref(0) 또는 reactive({name : 'Vue'})처럼 상태를 정의하면 Vue는 이 객체를 Proxy로 감싼다.
  - Vue는 이 데이터가 어떤 컴포넌트의 가상 DOM을 참조하고 있는지 기억해둔다. (의존성)
  - 이 데이터를 수정하면 Proxy가 이를 감지하고 이 데이터를 쓰는 컴포넌트를 다시 그리라고 알려준다.
  - 데이터가 바뀌면 전체 컴포넌트를 다시 계산하는 대신, 해당 데이터에 영향을 받는 최소한의 템플릿 영역만 핀포인트로 추적하여 갱신한다.
  - Vue 3는 컴포넌트 템플릿 내에서 변화하지 않는 정적 요소와 변화하는 동적 요소를 빌드 타임에 미리 구분하여 가상 DOM 비교 범위를 대폭 줄인다.
  - <p>{{count}}</p>처럼 변수가 들어간 부분에는 이 태그는 텍스트만 바뀐다는 PathFlag(태그)를 달아둔다.
  - 그래서 가상 DOM 비교가 시작될 때, Vue는 정적 요소는 건너뛰고 PatchFlag가 붙은 동적 요소만 핀포인트로 비교한다.
  - 개발자가 직접 재렌더링 최적화 코드를 작성하지 않아도 기본 구동 성능이 일정하게 유지된다.
  
  
  
• 생명주기 훅의 차이점
  컴포넌트가 생성되고 - DOM에 마운트되고 -  업데이트되고 - 파괴되는 과정(생명주기)을 다루는 방식의 차이를 알아보자.
  
  React_ useEffect 중심의 Side Effect 관리
  - React 함수형 컴포넌트에서는 단계별 훅이 따로 존재하지 않는다.
  - useEffect로 마운트/업데이트/언마운트 동작을 통합 관리한다.
  - React는 특정 데이터 상태가 바뀔 때 어떤 Side Effect를 실행하고 정리할건지 상태 동기화 중심으로 접근한다.
  
  Vue_ 명시적인 시점별 API
  - Vue는 컴포넌트의 특정 단계에 정확히 맞춰 실행되는 직관적인 이름의 훅 함수들을 제공한다.
  - setup( )은 컴포넌트 인스턴스가 생성되고 반응형 데이터가 초기화되는 시점이다.
  - onMounted( )는 DOM 요소가 실제 화면에 마운트된 직후다.
  - onUpdated( )는 반응형 데이터 변경으로 인해 DOM이 재렌더링 완료된 직후다.
  - onUnmounted( )는 컴포넌트가 DOM에서 언마운트된 직후다.
  - Vue는 지금이 마운트 단계인지 업데이트 단계인지라는 시점 중심으로 접근한다.