Vue.js와 React의 차이

뷰(Vue.js)와 리액트(React)는 컴포넌트(Component) 단위로 UI를 조립하고, 상태가 바뀌면 화면을 선언적으로 갱신한다는 같은 철학을 공유하는 프런트엔드 라이브러리다. 그러나 템플릿과 JSX라는 작성 방식, 반응성(Reactivity)을 구현하는 원리, 프레임워크로서의 완결성과 생태계 운영 방식에서 뚜렷한 차이가 있다. 어느 쪽이 우월하다기보다 팀의 배경과 프로젝트 성격에 따라 합리적인 선택이 달라지는 관계다.

공통 기반

두 라이브러리는 모두 UI를 상태의 함수로 본다. 개발자는 DOM(Document Object Model)을 직접 조작하는 대신 상태에 따른 화면의 모습을 선언하고, 라이브러리가 이전 화면과의 차이를 계산해 실제 DOM에 최소한의 변경만 적용한다. 이때 실제 DOM을 흉내 낸 가벼운 자바스크립트(JavaScript) 객체 트리인 가상 돔(Virtual DOM)을 비교 대상으로 쓰는 것도 같다. 컴포넌트에 데이터를 내려 주는 프롭스(Props), 단방향 데이터 흐름, 컴포넌트 로직 재사용을 위한 함수형 구성 방식(리액트의 훅 Hooks, 뷰의 컴포지션 API Composition API)까지 큰 그림은 서로 수렴해 왔다. 그래서 한쪽을 깊이 이해하면 다른 쪽의 학습 비용은 크게 줄어든다.

작성 방식: 템플릿과 JSX

뷰는 HTML을 확장한 템플릿 문법을 쓴다. 단일 파일 컴포넌트(SFC, Single File Component) 안에 template, script, style 블록을 나누어 구조, 로직, 스타일을 한 파일에 담되 역할을 구분한다. 조건과 반복은 v-if, v-for 같은 디렉티브(Directive)로 표현하며, 폼 입력에는 양방향 바인딩 v-model 같은 편의 문법이 제공된다. 리액트는 JSX를 쓴다. 자바스크립트 코드 안에 마크업을 쓰는 확장 문법으로, 조건과 반복도 별도 문법 없이 삼항 연산자와 배열 map 같은 순수 자바스크립트로 표현한다. 템플릿은 HTML에 익숙한 개발자의 진입 장벽이 낮고 정적 분석과 컴파일 최적화에 유리하며, JSX는 문법이 곧 자바스크립트라서 언어의 표현력을 제약 없이 쓸 수 있다는 것이 각각의 장점이다.

반응성 모델의 차이

가장 본질적인 차이는 상태 변경을 감지하고 갱신 범위를 정하는 방식이다. 뷰 3는 프록시(Proxy) 기반의 반응성 시스템을 쓴다. 상태 객체를 프록시로 감싸 읽기와 쓰기를 가로채고, 어떤 컴포넌트가 어떤 상태를 읽었는지 의존성을 자동으로 추적한다. 상태를 대입하는 순간 정확히 그 상태에 의존하는 부분만 다시 렌더링되므로, 개발자가 최적화를 크게 신경 쓰지 않아도 갱신 범위가 좁다. 리액트는 불변성(Immutability) 기반이다. 상태를 직접 수정하지 않고 setState나 useState의 설정 함수로 새 값을 만들어 교체하며, 변경이 일어나면 해당 컴포넌트와 하위 트리를 다시 실행한 뒤 가상 돔 비교로 실제 변경을 걸러낸다. 기본 동작이 하위 트리 재렌더링이므로 memo나 useMemo, useCallback 같은 도구로 개발자가 최적화 지점을 지정해 왔는데, 리액트 컴파일러(React Compiler)가 이런 메모이제이션(Memoization)을 자동화하는 방향으로 발전하고 있다. 요약하면 뷰는 무엇이 바뀌었는지를 시스템이 추적하고, 리액트는 다시 그린 결과에서 차이를 찾는다.