React는 왜 라이브러리이고 Vue는 왜 프레임워크에 가까운가

1. 먼저 결론부터

React와 Vue는 모두 화면을 만드는 도구이지만, 개발자를 이끄는 방식이 다릅니다.

text

React
= UI를 만들기 위한 핵심 기능을 제공하는 라이브러리

Vue
= UI 개발에 필요한 구조와 규칙을 비교적 통합적으로 제공하는 프레임워크

조금 더 정확히 표현하면 다음과 같습니다.

구분	React	Vue
공식적인 성격	UI 라이브러리	프로그레시브 프레임워크
핵심 역할	컴포넌트와 화면 렌더링	컴포넌트 기반 애플리케이션 개발
상태 관리	직접 선택	공식 생태계 Pinia 제공
라우팅	React Router 등 선택	Vue Router 제공
파일 구조	개발자가 결정	비교적 정형화
문법 스타일	JavaScript 중심 JSX	HTML, CSS, JavaScript를 분리한 SFC
개발 방향	조립형	안내형
자유도	높음	높지만 React보다 구조적
팀별 코드 차이	큰 편	상대적으로 작은 편

중요한 점은 다음입니다.

React로도 완전한 프레임워크 수준의 애플리케이션을 만들 수 있고, Vue도 필요한 기능만 선택하여 라이브러리처럼 사용할 수 있다.

따라서 단순히 기능의 많고 적음보다는, 도구가 개발 구조를 얼마나 결정해 주는가가 핵심 차이입니다.

2. 라이브러리와 프레임워크의 본질적인 차이

2.1 가장 쉬운 정의

text

라이브러리:
내 코드가 필요할 때 라이브러리를 호출한다.

프레임워크:
프레임워크가 정한 실행 흐름 안에서 내 코드가 호출된다.

이 차이를 흔히 다음과 같이 표현합니다.

text

라이브러리:
내가 도구를 부른다.

프레임워크:
도구가 나를 부른다.

이를 기술적으로는 제어의 역전, 즉 IoC라고 합니다.

text

IoC
= Inversion of Control
= 제어권이 개발자 코드에서 프레임워크로 넘어가는 구조

2.2 식당으로 비유하기

라이브러리: 재료를 직접 골라 요리하는 주방

React는 기본적인 조리 도구와 재료를 제공합니다.

text

React가 제공하는 것

- 컴포넌트
- JSX
- 상태
- 이벤트 처리
- 렌더링
- Hooks

하지만 나머지는 개발자가 선택합니다.

text

개발자가 선택하는 것

- 라우터
- 전역 상태 관리
- API 통신
- 폼 관리
- 폴더 구조
- CSS 방식
- 빌드 도구
- 서버 렌더링
- 데이터 캐싱

React는 다음과 같이 말하는 것과 비슷합니다.

칼과 프라이팬은 준비했습니다. 어떤 요리를 만들지는 직접 결정하세요.

프레임워크: 코스와 조리법이 준비된 레스토랑

Vue는 애플리케이션 개발 과정에 필요한 구조를 비교적 일관되게 안내합니다.

text

Vue 생태계

- Vue
- Vue Router
- Pinia
- Vue Devtools
- Single File Component
- Composition API
- 공식 스타일 가이드

Vue는 다음과 같이 말하는 것과 비슷합니다.

이 순서와 방식으로 조리하면 안정적으로 완성할 수 있습니다.

3. 라이브러리와 프레임워크를 집 짓기로 비교하기

React

React는 집을 짓기 위한 좋은 벽돌과 공구를 제공합니다.

text

React가 제공

- 벽돌: 컴포넌트
- 설계 단위: JSX
- 연결 장치: Props
- 내부 상태: State
- 작업 도구: Hooks

하지만 집 전체의 구조는 개발자가 결정합니다.

text

개발자가 결정

- 단독주택인지 아파트인지
- 방을 어디에 배치할지
- 전기 배선을 어떻게 구성할지
- 수도관을 어떻게 연결할지
- 자재를 어떤 회사 제품으로 사용할지

그래서 React 프로젝트는 팀마다 구조가 크게 다를 수 있습니다.

text

프로젝트 A

src/
├── components/
├── pages/
├── hooks/
├── services/
├── stores/
└── utils/

text

프로젝트 B

src/
├── app/
├── features/
├── entities/
├── shared/
├── widgets/
└── processes/

둘 다 React 프로젝트이지만 구조와 철학이 완전히 다를 수 있습니다.

Vue

Vue는 벽돌과 공구뿐 아니라 기본 설계 방식도 함께 제시합니다.

text

Vue가 자연스럽게 유도하는 구조

src/
├── components/
├── views/
├── router/
├── stores/
├── composables/
└── assets/

또한 하나의 컴포넌트 안에서 다음 구조를 사용하도록 자연스럽게 안내합니다.

vue

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">
    {{ count }}
  </button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

Vue는 HTML, JavaScript, CSS를 하나의 파일에 넣지만 역할별로 명확히 구분합니다.

4. React와 Vue의 개발 방향 차이

4.1 React의 개발 방향

React의 중심 철학은 다음과 같습니다.

text

UI는 상태를 화면으로 표현한 결과다.

이를 공식처럼 표현하면 다음과 같습니다.

text

UI = f(state)

상태가 변경되면 컴포넌트 함수가 다시 실행되고, 새로운 UI 구조가 계산됩니다.

React에서는 HTML 템플릿보다 JavaScript가 중심입니다.

jsx

function UserCard({ user }) {
  const isAdmin = user.role === 'admin'

  return (
    <section>
      <h2>{user.name}</h2>

      {isAdmin && (
        <strong>관리자</strong>
      )}
    </section>
  )
}

조건문, 반복문, 함수 호출, 데이터 변환이 모두 JavaScript 안에서 이루어집니다.

즉 React의 방향은 다음과 같습니다.

text

JavaScript를 이용해 UI를 표현한다.

4.2 Vue의 개발 방향

Vue는 HTML 템플릿을 중심으로 화면 구조를 표현합니다.

vue

<script setup lang="ts">
defineProps<{
  user: {
    name: string
    role: string
  }
}>()
</script>

<template>
  <section>
    <h2>{{ user.name }}</h2>

    <strong v-if="user.role === 'admin'">
      관리자
    </strong>
  </section>
</template>

Vue의 방향은 다음에 가깝습니다.

text

HTML을 중심으로 UI를 표현하고,
JavaScript가 상태와 동작을 담당한다.

4.3 핵심 비교

text

React
JavaScript 안에 HTML과 비슷한 JSX를 넣는다.

Vue
HTML 템플릿 안에 JavaScript 표현식을 넣는다.

React는 JavaScript 개발자에게 자연스럽고, Vue는 HTML 기반 웹 개발자에게 직관적인 경우가 많습니다.

5. React가 라이브러리라는 사실이 중요한 이유

React가 라이브러리라는 것은 단순한 명칭의 차이가 아닙니다.

프로젝트 설계 방식에 직접적인 영향을 줍니다.

5.1 React는 많은 결정을 개발자에게 넘긴다

React 자체만으로는 다음 기능이 포함되지 않습니다.

text

- URL 라우팅
- 전역 상태 관리
- API 캐싱
- 서버 상태 관리
- 폼 검증
- 국제화
- 서버 사이드 렌더링
- 인증 구조
- 디렉터리 구조

따라서 개발자가 직접 조합합니다.

예를 들어 React 프로젝트에서는 다음과 같은 선택이 가능합니다.

목적	선택 가능한 도구
라우팅	React Router, TanStack Router
상태 관리	Redux, Zustand, Jotai, Recoil
서버 상태	TanStack Query, SWR
폼	React Hook Form, Formik
스타일	CSS Modules, Tailwind CSS, Emotion
전체 프레임워크	Next.js, Remix

이것이 React의 강점이면서 어려움입니다.

text

강점:
상황에 맞게 가장 적합한 기술을 선택할 수 있다.

단점:
팀마다 선택이 다르고 프로젝트 구조가 쉽게 복잡해진다.

5.2 Vue는 공식적인 길이 상대적으로 명확하다

Vue 프로젝트에서는 보통 다음 조합을 사용합니다.

목적	일반적인 선택
라우팅	Vue Router
상태 관리	Pinia
빌드	Vite
전체 프레임워크	Nuxt
파일 형식	Vue SFC
재사용 로직	Composable

선택의 폭은 존재하지만 공식 생태계의 권장 경로가 비교적 명확합니다.

6. React와 Vue는 둘 다 Virtual DOM을 사용하는가

일반적으로 React와 Vue 모두 Virtual DOM을 사용합니다.

하지만 흔히 다음과 같이 잘못 이해합니다.

text

잘못된 설명:

브라우저 DOM 전체를 메모리에 복사하고,
원본 DOM과 복사본 DOM을 비교한다.

이 설명은 이해를 돕기 위한 단순화이지만 정확하지 않습니다.

정확히는 다음에 가깝습니다.

text

Virtual DOM은 실제 DOM의 완전한 복사본이 아니다.

화면 구조를 설명하는 가벼운 JavaScript 객체 트리다.

7. 실제 DOM과 Virtual DOM의 차이

7.1 실제 DOM

브라우저의 실제 DOM은 단순한 JavaScript 객체가 아닙니다.

html

<div id="app">
  <h1>Hello</h1>
  <button>Click</button>
</div>

브라우저는 이 HTML을 파싱하여 내부 DOM 노드를 만듭니다.

실제 DOM 노드는 다음과 같은 많은 기능과 연결됩니다.

text

- 부모와 자식 관계
- 이벤트
- 스타일 계산
- 레이아웃
- 접근성 트리
- 브라우저 렌더링 엔진
- 화면 그리기

실제 DOM 변경은 경우에 따라 다음 작업으로 연결될 수 있습니다.

모든 DOM 변경이 항상 전체 과정을 수행하는 것은 아니지만, DOM 변경은 브라우저 렌더링 과정에 영향을 줄 수 있습니다.

7.2 Virtual DOM

Virtual DOM은 화면 구조를 설명하는 가벼운 객체입니다.

예를 들어 JSX가 다음과 같다고 가정합니다.

jsx

const element = (
  <div className="card">
    <h1>Hello</h1>
  </div>
)

개념적으로는 다음과 비슷한 객체가 만들어집니다.

javascript

{
  type: 'div',
  props: {
    className: 'card',
    children: {
      type: 'h1',
      props: {
        children: 'Hello'
      }
    }
  }
}

이 객체는 실제 DOM 노드가 아닙니다.

text

실제 DOM

HTMLDivElement
HTMLHeadingElement
브라우저 렌더링 엔진과 연결됨

text

Virtual DOM

일반 JavaScript 객체
화면 구조와 속성을 설명함
메모리 안에서 비교하기 쉬움

8. “DOM을 메모리에 카피한다”는 표현이 정확하지 않은 이유

React는 실제 DOM을 그대로 복사하지 않습니다.

다음과 같은 과정에 가깝습니다.

React 내부에는 단순한 Virtual DOM 객체만 있는 것이 아니라, 작업을 관리하기 위한 Fiber 구조가 존재합니다.

Fiber는 대략 다음 정보를 관리합니다.

text

- 컴포넌트 종류
- Props
- State
- 부모와 자식 관계
- 이전 렌더링 결과
- 처리해야 할 작업
- DOM 노드 참조
- 업데이트 우선순위

따라서 React 내부 구조를 단순히 “DOM 복사본”이라고 부르면 중요한 부분을 놓치게 됩니다.

더 적절한 표현은 다음과 같습니다.

React는 실제 DOM을 복사하는 것이 아니라, UI 구조를 나타내는 메모리상의 객체 트리와 작업 트리를 관리한다.

9. React 렌더링 과정

React의 업데이트는 크게 두 단계로 나눌 수 있습니다.

text

1. Render Phase
2. Commit Phase

9.1 Render Phase

Render Phase에서는 새로운 화면이 어떻게 되어야 하는지 계산합니다.

이 단계에서는 일반적으로 실제 DOM을 바로 변경하지 않습니다.

text

Render Phase에서 하는 일

- 컴포넌트 실행
- 새로운 UI 구조 계산
- 이전 구조와 비교
- 어떤 노드를 추가할지 계산
- 어떤 속성을 변경할지 계산
- 어떤 노드를 제거할지 계산

9.2 Commit Phase

계산된 변경 내용을 실제 DOM에 반영합니다.

Commit Phase에서는 다음 작업이 이루어집니다.

text

- 실제 DOM 변경
- ref 연결
- layout effect 실행
- 화면 반영
- effect 예약

10. React의 전체 렌더링 구조

11. 간단한 React 업데이트 예제

jsx

import { useState } from 'react'

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

  return (
    <section>
      <h1>카운트: {count}</h1>

      <button onClick={() => setCount(count + 1)}>
        증가
      </button>
    </section>
  )
}

버튼을 클릭하면 다음 과정이 일어납니다.

text

setCount가 호출된다.
React가 상태 업데이트를 예약한다.
Counter 함수가 다시 실행된다.
새로운 React Element가 생성된다.
이전 결과와 새로운 결과를 비교한다.
h1의 텍스트가 변경되었다고 판단한다.
실제 DOM의 해당 텍스트만 변경한다.

전체 <section>을 삭제하고 다시 만드는 것이 아닙니다.

text

이전 화면

<section>
  <h1>카운트: 0</h1>
  <button>증가</button>
</section>

text

새 화면

<section>
  <h1>카운트: 1</h1>
  <button>증가</button>
</section>

React는 두 구조를 비교하여 다음 차이를 찾습니다.

text

변경된 부분

"카운트: 0"
→
"카운트: 1"

따라서 실제 DOM에서는 텍스트 노드만 갱신합니다.

12. Virtual DOM을 설계 도면으로 비유하기

실제 DOM을 건물이라고 생각할 수 있습니다.

text

실제 DOM
= 실제로 지어진 건물

Virtual DOM
= 건물을 표현하는 설계 도면

상태 변경
= 건물 변경 요청

Diff
= 이전 도면과 새 도면 비교

Commit
= 실제 건물 공사

방 하나의 전등을 바꾸는데 건물 전체를 철거할 필요는 없습니다.

React도 마찬가지입니다.

text

카운트 숫자 하나 변경
→ 전체 DOM 재생성 아님
→ 해당 텍스트 노드만 수정

13. Virtual DOM을 문서 수정으로 비유하기

기존 문서가 다음과 같다고 가정합니다.

text

홍길동님의 포인트는 100점입니다.

새 문서는 다음과 같습니다.

text

홍길동님의 포인트는 110점입니다.

전체 문서를 새로 출력하지 않고 다음 부분만 수정할 수 있습니다.

text

100
→
110

React의 비교 과정도 비슷합니다.

14. Vue의 반응성 구조

Vue도 Virtual DOM을 사용하지만 상태 변경을 감지하는 방식에서 React와 차이가 있습니다.

React는 일반적으로 상태 업데이트가 발생하면 컴포넌트 함수가 다시 실행됩니다.

Vue는 반응형 데이터의 사용 관계를 추적합니다.

vue

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">
    {{ count }}
  </button>
</template>

Vue는 렌더링 과정에서 count가 사용되었다는 사실을 추적합니다.

15. React와 Vue의 상태 변경 감지 차이

React

React는 대체로 개발자가 상태 변경을 명시적으로 알립니다.

jsx

setCount(count + 1)

text

React에게 상태가 바뀌었다고 알림
→ 컴포넌트 렌더링
→ 새로운 결과 계산

Vue

Vue는 Proxy와 반응성 시스템을 이용하여 값의 접근과 변경을 추적합니다.

javascript

const state = reactive({
  count: 0
})

state.count++

개념적으로는 다음과 같습니다.

text

값을 읽을 때
→ 이 값에 의존하는 코드를 기억

값을 변경할 때
→ 기억해 둔 관련 코드를 다시 실행

비교

구분	React	Vue
상태 변경 방식	setter 호출	반응형 객체 변경
업데이트 감지	상태 업데이트 요청	Proxy 기반 추적
컴포넌트 실행	함수 컴포넌트 재실행	의존성 기반 업데이트
최적화 방식	memo, useMemo, useCallback	컴파일러와 반응성 추적
기본 사고방식	다시 계산한 뒤 비교	무엇이 사용되었는지 추적

16. Vue가 무조건 실제 DOM을 더 적게 변경하는가

그렇게 단순하게 판단할 수는 없습니다.

React와 Vue 모두 최종적으로 필요한 DOM 변경만 수행하려고 합니다.

차이는 최종 DOM 변경보다 다음 과정에 있습니다.

text

React

어떤 컴포넌트를 다시 계산할 것인가
어떻게 이전 결과와 비교할 것인가

text

Vue

어떤 반응형 값이 사용되었는가
어떤 렌더링 작업이 그 값에 의존하는가

Vue는 컴파일 단계에서 정적인 부분과 동적인 부분을 구분할 수 있습니다.

예를 들어 다음 템플릿이 있습니다.

vue

<template>
  <section>
    <h1>사용자 정보</h1>
    <p>{{ userName }}</p>
  </section>
</template>

여기서 다음 부분은 변경되지 않습니다.

html

<h1>사용자 정보</h1>

다음 부분은 동적으로 변경됩니다.

html

<p>{{ userName }}</p>

Vue 컴파일러는 이러한 정보를 이용하여 업데이트를 최적화할 수 있습니다.

17. React도 매번 DOM 전체를 다시 만드는가

아닙니다.

React 컴포넌트 함수가 다시 실행되는 것과 실제 DOM을 다시 만드는 것은 다른 이야기입니다.

text

컴포넌트 함수 재실행
≠
실제 DOM 전체 재생성

컴포넌트 함수가 다시 실행되면 새로운 UI 설명 객체가 만들어집니다.

그다음 React가 이전 결과와 비교하여 실제 변경이 필요한 부분만 DOM에 반영합니다.

18. Virtual DOM이 항상 빠른가

Virtual DOM을 사용한다고 해서 무조건 가장 빠른 것은 아닙니다.

직접 DOM을 정확히 한 번 수정할 수 있다면, 직접 수정하는 방식이 더 빠를 수도 있습니다.

javascript

document.querySelector('#count').textContent = '10'

이 코드는 매우 직접적입니다.

React는 다음 과정을 거칠 수 있습니다.

text

상태 변경
→ 컴포넌트 계산
→ 트리 비교
→ 변경 사항 확인
→ DOM 수정

그러므로 Virtual DOM의 진짜 장점은 단순히 “항상 더 빠르다”가 아닙니다.

text

Virtual DOM의 핵심 장점

- 선언적으로 UI를 작성할 수 있다.
- 복잡한 DOM 변경을 자동으로 관리한다.
- 상태와 화면의 일관성을 유지한다.
- 개발자가 수동 DOM 조작을 줄일 수 있다.
- 큰 애플리케이션을 컴포넌트 단위로 관리할 수 있다.

더 정확한 표현은 다음과 같습니다.

Virtual DOM은 DOM을 무조건 빠르게 만드는 기술이라기보다, 복잡한 UI 업데이트를 예측 가능하고 선언적으로 관리하기 위한 추상화다.

19. 명령형 DOM과 선언형 UI 비교

명령형 방식

개발자가 변경 순서를 직접 작성합니다.

javascript

const title = document.querySelector('#title')
const button = document.querySelector('#button')

title.textContent = '로그인 완료'
title.classList.add('success')
button.disabled = true
button.textContent = '완료'

개발자가 다음을 모두 기억해야 합니다.

text

- 어떤 요소를 찾아야 하는가
- 어떤 순서로 변경해야 하는가
- 이전 상태를 어떻게 제거해야 하는가
- 이벤트를 어떻게 정리해야 하는가
- 화면과 상태가 일치하는가

선언형 방식

현재 상태에서 화면이 어떻게 보여야 하는지만 작성합니다.

jsx

function LoginButton({ isLoggedIn }) {
  return (
    <>
      <h1 className={isLoggedIn ? 'success' : ''}>
        {isLoggedIn ? '로그인 완료' : '로그인 필요'}
      </h1>

      <button disabled={isLoggedIn}>
        {isLoggedIn ? '완료' : '로그인'}
      </button>
    </>
  )
}

개발자는 최종 화면을 선언하고, DOM 변경은 React가 처리합니다.

text

명령형

A를 찾는다.
A의 텍스트를 바꾼다.
A의 클래스를 추가한다.
B를 비활성화한다.
B의 텍스트를 바꾼다.

text

선언형

현재 상태가 이러하므로
화면은 이렇게 보여야 한다.

20. 택시와 자가용으로 비교하는 라이브러리와 프레임워크

React 라이브러리: 자가용

text

- 목적지를 직접 정한다.
- 경로를 직접 선택한다.
- 중간에 자유롭게 방향을 바꿀 수 있다.
- 차량 관리도 직접 해야 한다.
- 잘못된 길로 갈 가능성도 있다.

Vue 프레임워크: 안내가 잘 갖춰진 대중교통

text

- 노선이 비교적 명확하다.
- 정류장과 환승 방식이 정해져 있다.
- 처음 사용하는 사람도 이동하기 쉽다.
- 경로를 완전히 자유롭게 바꾸기는 어렵다.

React가 더 좋거나 Vue가 더 좋다는 의미가 아닙니다.

text

자유로운 이동이 중요하면 React
일관된 이동 경로가 중요하면 Vue

21. 레고로 비교하는 React와 Vue

React

React는 레고 블록에 가깝습니다.

text

- 블록의 품질이 좋다.
- 무엇을 만들지는 자유다.
- 자동차도 만들 수 있다.
- 성도 만들 수 있다.
- 설계가 잘못되면 구조가 불안정해질 수 있다.

React 자체는 완성된 애플리케이션 설계도를 강제하지 않습니다.

Vue

Vue는 레고 블록과 기본 조립 설명서를 함께 제공하는 것에 가깝습니다.

text

- 블록을 제공한다.
- 일반적인 조립 순서를 알려 준다.
- 부품 배치 방식이 비교적 명확하다.
- 팀원이 바뀌어도 구조를 이해하기 쉽다.

22. React 프로젝트가 시간이 지나면서 어려워지는 이유

React의 자유도는 프로젝트 초기에 매우 편리합니다.

하지만 팀이 커지면 문제가 발생할 수 있습니다.

text

초기

React만 설치
→ 빠르게 화면 구현

text

중기

라우터 필요
상태 관리 필요
API 캐시 필요
폼 관리 필요
권한 관리 필요

text

후기

라이브러리가 많아짐
개발자마다 구현 방식이 다름
폴더 구조가 복잡해짐
상태의 책임 범위가 불명확해짐

결국 큰 React 프로젝트는 팀 내부에서 자체 프레임워크를 만들게 되는 경우가 많습니다.

text

React 라이브러리
+
팀 규칙
+
폴더 구조
+
상태 관리
+
라우터
+
API 계층
+
공통 컴포넌트
=
회사의 자체 프레임워크

23. Vue 프로젝트가 상대적으로 일관되기 쉬운 이유

Vue는 일반적으로 다음 패턴을 자연스럽게 사용합니다.

text

페이지
→ 컴포넌트
→ composable
→ store
→ API service

또한 Vue SFC는 역할 구분이 눈에 잘 보입니다.

vue

<script setup lang="ts">
// 상태와 로직
</script>

<template>
  <!-- 화면 구조 -->
</template>

<style scoped>
/* 스타일 */
</style>

개발자마다 스타일 차이는 존재하지만, 기본 구조가 유사하게 유지되는 편입니다.

24. React와 Vue에서 컴포넌트를 바라보는 방식

React 컴포넌트

React 컴포넌트는 기본적으로 JavaScript 함수입니다.

jsx

function Greeting({ name }) {
  return <h1>안녕하세요, {name}</h1>
}

text

입력
= Props

출력
= React Element

수학적으로 표현하면 다음과 비슷합니다.

text

Component(props, state)
→ UI description

Vue 컴포넌트

Vue 컴포넌트는 템플릿, 상태, 스타일을 하나의 단위로 묶은 구성 요소입니다.

vue

<script setup lang="ts">
defineProps<{
  name: string
}>()
</script>

<template>
  <h1>안녕하세요, {{ name }}</h1>
</template>

React는 함수를 중심으로 사고하고, Vue는 컴포넌트 파일 단위로 사고하는 경향이 있습니다.

25. React의 JSX는 HTML이 아니다

다음 React 코드는 HTML처럼 보입니다.

jsx

<button className="primary">
  저장
</button>

하지만 실제로는 JavaScript 표현식입니다.

개념적으로 다음과 같은 함수 호출로 변환됩니다.

javascript

React.createElement(
  'button',
  {
    className: 'primary'
  },
  '저장'
)

현대 React에서는 JSX Transform을 통해 내부적으로 다른 런타임 함수가 사용될 수 있지만, 핵심 개념은 같습니다.

text

JSX
→ JavaScript 객체 생성 코드
→ React Element 생성

따라서 JSX는 브라우저가 직접 읽는 HTML이 아닙니다.

26. Vue 템플릿도 브라우저가 그대로 실행하는 HTML이 아니다

Vue 템플릿도 최종적으로 렌더 함수로 컴파일됩니다.

vue

<template>
  <button @click="count++">
    {{ count }}
  </button>
</template>

개념적으로 다음과 같은 렌더링 코드가 됩니다.

javascript

function render() {
  return createVNode(
    'button',
    {
      onClick: () => count.value++
    },
    count.value
  )
}

즉 React와 Vue 모두 최종적으로 JavaScript를 이용해 UI 구조를 생성합니다.

차이는 작성 방식과 컴파일 최적화 방식에 있습니다.

27. React와 Vue의 렌더링 비교 다이어그램

28. React의 Reconciliation이란

Reconciliation은 이전 UI 구조와 새로운 UI 구조를 비교하여 실제 DOM 변경을 결정하는 과정입니다.

text

Reconciliation
= 조정
= 이전 UI와 새로운 UI를 맞추는 과정

React는 대략 다음 원칙을 이용합니다.

text

요소 타입이 다르면 기존 트리를 교체한다.
요소 타입이 같으면 속성을 비교한다.
자식 목록에서는 key를 이용해 항목을 식별한다.

타입이 같은 경우

jsx

<div className="old" />

jsx

<div className="new" />

태그 타입은 둘 다 div입니다.

따라서 DOM 노드를 유지하고 class 속성만 변경할 수 있습니다.

타입이 다른 경우

jsx

<div>Hello</div>

jsx

section>Hello</section>

타입이 div에서 section으로 변경되었습니다.

React는 기존 노드를 제거하고 새로운 노드를 만들 수 있습니다.

29. React에서 key가 중요한 이유

다음 목록이 있다고 가정합니다.

jsx

const users = [
  { id: 1, name: 'Kim' },
  { id: 2, name: 'Lee' }
]

jsx

{users.map(user => (
  <UserItem
    key={user.id}
    user={user}
  />
))}

key는 화면에 출력되는 값이 아니라 React가 각 항목의 정체성을 구분하기 위한 값입니다.

text

key의 역할

- 기존 항목인지 확인
- 새로 추가된 항목인지 확인
- 제거된 항목인지 확인
- 순서만 바뀐 항목인지 확인

배열 인덱스를 key로 사용하면 항목의 순서가 변경될 때 잘못된 상태 재사용이 발생할 수 있습니다.

30. React에서 함수가 다시 실행되는 것을 두려워할 필요가 없는 이유

React 함수 컴포넌트는 상태가 변경되면 다시 실행될 수 있습니다.

jsx

function UserPage() {
  console.log('UserPage 실행')

  return <div>User</div>
}

여기서 함수가 다시 실행된다는 것은 다음 의미입니다.

text

새로운 UI 결과를 계산한다.

다음 의미는 아닙니다.

text

실제 DOM을 전부 삭제한다.
브라우저 화면을 전부 다시 만든다.
페이지를 새로고침한다.

JavaScript 함수 실행과 브라우저 DOM 변경은 분리해서 이해해야 합니다.

31. React 최적화 도구가 필요한 이유

React는 컴포넌트 함수가 다시 실행될 수 있기 때문에 다음 최적화 도구를 제공합니다.

text

React.memo
useMemo
useCallback

하지만 무조건 사용하는 것은 좋지 않습니다.

text

React.memo

컴포넌트 Props가 같다면
렌더링 결과를 재사용

text

useMemo

계산 결과를 재사용

text

useCallback

함수 객체를 재사용

이러한 기능도 비용이 있습니다.

text

- 이전 값 저장
- 의존성 비교
- 코드 복잡도 증가
- 잘못된 의존성으로 버그 발생

따라서 실제 렌더링 문제가 있거나 참조 안정성이 필요한 경우에 사용하는 것이 좋습니다.

32. React와 Vue 선택 기준

React가 적합한 경우

text

- JavaScript와 TypeScript 중심 개발을 선호한다.
- 라이브러리를 자유롭게 조합하고 싶다.
- 대규모 프론트엔드 아키텍처를 직접 설계할 수 있다.
- React 생태계가 필요한 프로젝트다.
- React Native를 함께 고려한다.
- Next.js를 이용할 계획이다.
- 다양한 렌더링 전략이 필요하다.

Vue가 적합한 경우

text

- HTML 템플릿 방식이 익숙하다.
- 프로젝트 구조의 일관성이 중요하다.
- 신규 개발자의 진입 장벽을 낮추고 싶다.
- 공식 생태계를 중심으로 구성하고 싶다.
- 화면 개발 속도가 중요하다.
- 기존 HTML 화면을 점진적으로 개선하고 싶다.
- Nuxt를 이용할 계획이다.

33. 팀 관점에서의 선택

개인 개발에서는 자유도가 장점이 될 수 있습니다.

하지만 팀 개발에서는 자유도가 반드시 장점만은 아닙니다.

text

자유도 증가
→ 선택지 증가
→ 토론 증가
→ 팀별 구현 차이 증가
→ 유지보수 비용 증가 가능

React 프로젝트에서는 초기에 다음 내용을 명확히 정하는 것이 중요합니다.

text

- 폴더 구조
- 컴포넌트 분리 기준
- 상태 관리 기준
- 서버 상태와 클라이언트 상태 구분
- API 호출 위치
- 에러 처리 기준
- 라우팅 방식
- 스타일링 방식
- 테스트 기준
- 네이밍 규칙

React가 라이브러리이기 때문에 이러한 규칙을 프레임워크가 대신 결정해 주지 않습니다.

34. React를 사용하면서 실제로는 프레임워크를 사용하는 경우

많은 개발자가 React 프로젝트를 한다고 말하지만 실제로는 Next.js를 사용하는 경우가 많습니다.

text

React
= UI 라이브러리

Next.js
= React 기반 프레임워크

Next.js는 React에 다음 기능을 추가합니다.

text

- 파일 기반 라우팅
- 서버 렌더링
- 서버 컴포넌트
- API 또는 서버 기능
- 이미지 최적화
- 빌드 설정
- 배포 구조
- 캐싱
- 메타데이터 관리

Vue에서도 비슷한 관계가 있습니다.

text

Vue
= 프로그레시브 UI 프레임워크

Nuxt
= Vue 기반 풀스택 프레임워크

35. 자주 발생하는 오해

오해 1. React는 프레임워크다

실무에서는 React 생태계 전체를 묶어 프레임워크처럼 부르기도 합니다.

하지만 React 자체는 UI 렌더링에 집중한 라이브러리입니다.

오해 2. Vue는 모든 것이 내장되어 있다

Vue 자체에 모든 기능이 들어 있는 것은 아닙니다.

Vue Router와 Pinia도 별도 패키지입니다.

다만 공식 생태계와 권장 구조가 명확하여 프레임워크처럼 느껴집니다.

오해 3. Virtual DOM은 실제 DOM의 복사본이다

Virtual DOM은 실제 DOM의 완전한 복사본이 아닙니다.

UI를 설명하는 가벼운 객체 구조입니다.

오해 4. React는 상태가 바뀔 때 DOM 전체를 다시 만든다

컴포넌트 함수와 UI 객체는 다시 계산될 수 있지만 실제 DOM은 필요한 부분만 수정됩니다.

오해 5. Virtual DOM은 항상 직접 DOM 조작보다 빠르다

직접 정확한 DOM 하나를 변경하는 작업은 더 빠를 수 있습니다.

Virtual DOM의 주요 목적은 복잡한 UI의 일관성과 유지보수성을 높이는 것입니다.

오해 6. 라이브러리가 프레임워크보다 작거나 부족하다

라이브러리와 프레임워크의 차이는 품질이나 성능의 차이가 아닙니다.

text

라이브러리
= 선택과 조합의 자유를 제공

프레임워크
= 구조와 실행 흐름을 제공

36. 핵심 개념 한 장 요약

37. 개발자에게 설명할 때 사용할 수 있는 문장

text

React는 완성된 애플리케이션의 구조를 제공하는 도구라기보다,
화면을 컴포넌트로 만들고 상태 변화에 따라 렌더링하는 방법을 제공하는 라이브러리다.

라우팅, 상태 관리, API 캐싱, 폴더 구조와 같은 애플리케이션 아키텍처는
React가 직접 결정하지 않으며 개발자와 팀이 선택해야 한다.

반면 Vue는 템플릿, 반응성 시스템, Single File Component,
공식 라우터와 상태 관리 도구를 중심으로
애플리케이션을 구성하는 비교적 일관된 방향을 제공한다.

38. 최종 정리

React

text

React는 UI를 만드는 강력한 라이브러리다.

React는 화면 렌더링의 핵심을 제공하지만,
애플리케이션 전체 구조를 강제하지 않는다.

따라서 자유도가 높고 생태계가 크지만,
팀이 아키텍처와 규칙을 직접 설계해야 한다.

Vue

text

Vue는 점진적으로 적용할 수 있는 프레임워크다.

작게는 일부 화면에만 사용할 수 있고,
크게는 Vue Router, Pinia, Nuxt와 함께
전체 애플리케이션을 구성할 수 있다.

React보다 개발 방향과 권장 구조가 명확한 편이다.

Virtual DOM

text

Virtual DOM은 실제 DOM을 그대로 복사한 것이 아니다.

UI가 어떻게 보여야 하는지를 표현하는
메모리상의 가벼운 객체 트리다.

React와 Vue는 이전 UI 구조와 새로운 UI 구조를 비교하고,
최종적으로 필요한 실제 DOM만 변경한다.

가장 중요한 한 문장

React는 길을 직접 설계할 수 있도록 좋은 부품을 제공하는 라이브러리이고, Vue는 부품과 함께 권장 조립 방법까지 제공하는 프레임워크에 가깝다.

그리고 Virtual DOM은 실제 건물을 복사한 가상 건물이 아니라, 건물의 변경 사항을 계산하기 위한 메모리상의 설계 도면에 가깝다.

React는 왜 라이브러리이고 Vue는 왜 프레임워크에 가까운가

중년개발자