[ Vue ] React와 Vue의 반응성 시스템의 공통점/차이점

vue의 반응성 시스템을 공부하며 찾아 본 내용이라 vue에 조금 치중되어 있습니다…

 

 

---

 

공통점

1. 선언적 방식으로 UI를 업데이트 한다.

• 개발자는 데이터가 바뀌었을 때 어떤 식으로 UI가 바뀌는지를 명시하는 대신, 데이터와 UI 간의 관계를 설정하면 내부에서 알아서 UI를 갱신해준다.

 

2. Virtual DOM 사용

• 데이터가 변화하면 실제 DOM을 바로 업데이트하는 대신 가상 DOM을 먼저 계산하여, 변경된 부분만 실제 DOM에 적용하는 방식으로 성능을 최적화한다. → reconciliation
• https://ko.vuejs.org/guide/extras/rendering-mechanism#virtual-dom

Vue 렌더 파이프라인

 

3. 컴포넌트 기반

• 각 컴포넌트는 자체적인 상태를 가지고 있으며, 그 상태가 변할 때 UI를 갱신한다.

 

 

---

 

차이점

1. 상태 관리와 반응성 구현 방식

 

React

• 단방향 데이터 흐름 + 상태 기반 방식
• 상태가 바뀌면 해당 컴포넌트는 완전히 다시 렌더링 된다.
• proxy와 같은 별도의 반응성 시스템이 아닌, 직접 상태와 리렌더링을 트리거하는 구조이다.

Vue

• 양방향 데이터 바인딩 + 자동 반응성 시스템
• Proxy를 사용하며, 상태를 추적하고, 상태가 변경되면 자동으로 UI를 업데이트한다.
• React에 비해 좀 더 “자동화된” 반응성을 제공한다.

 

 

2. Virtual DOM 최적화

 

React

• 변경된 부분을 찾아내어, 필요한 부분만 다시 렌더링한다.
• 이를 위해 컴포넌트 전체가 리렌더링되는 구조이며, 불필요한 리렌더링을 막기 위해서 shouldComponentUpdate 메서드나 React.memo를 사용하여 최적화를 해야 한다.

Vue

• Proxy로 감지된 데이터 변경 사항을 통해 자동으로 최적화된 DOM 업데이트를 처리한다.
• Vue의 경우 React보다 더 미세한 수준에서의 업데이트가 가능하며, 개발자가 직접 최적화를 고려하지 않아도 되는 경우가 많다.

 

 

3. 양방향 데이터 바인딩

 

React

• 단방향 데이터 흐름
• 부모 컴포넌트에서 자식 컴포넌트로 상태를 전달하고, 자식 컴포넌트가 상위 컴포넌트로 이벤트를 전달하는 방식으로 데이터가 흐른다.

Vue

• 양방향 데이터 바인딩
• 템플릿에서 v-model 을 사용해 쉽게 데이터와 UI 간의 양방향 바인딩을 할 수 있다.

 

 

4. React Hooks vs Vue Composition API

 

React

• Hooks를 통해 함수형 컴포넌트 내에서 상태와 부수 효과를 처리할 수 있다.
• useState, useEffect, useReducer 등

Vue

• Vue 3에서 도입된 Composition API는 React의 Hooks와 비슷한 역할을 한다.
• reactive, ref, watchEffect 등의 API를 통해 상태를 정의하고 반응성을 관리할 수 있다.
• Composition API는 코드의 재사용성을 높이고, 컴포넌트 로직을 더 명확하게 작성할 수 있도록 돕는다.

 

---

 

요약

특성	React	Vue
반응성 시스템	상태 변경 시 리렌더링 (useState, useEffect 등)	Proxy 기반 자동 반응성 (reactive, ref)
Virtual DOM	변경된 부분을 찾아 부분적으로 업데이트	더 세밀한 수준에서 자동으로 최적화된 DOM 업데이트
데이터 흐름	단방향 데이터 흐름	양방향 데이터 바인딩 (v-model) 가능
최적화	직접적인 최적화 필요 (shouldComponentUpdate, React.memo)	기본적으로 최적화된 반응성 제공
Hooks/Composition API	Hooks (useState, useEffect)	Composition API (reactive, ref)

 

 

 

---

의문

❓ vue 3에서 가장 많이 쓰이는 ref는 정작 proxy 기반이 아닌데, vue3의 반응성 시스템을 proxy 기반 자동 반응성이라고 할 수 있는가?

 

→ Vue 3의 반응성 시스템을 Proxy 기반 자동 반응성이라고 부르는 이유는 Vue 3의 핵심 반응성 기능이 Proxy에 의존하고 있기 때문이다.

 

Vue 3의 반응성 시스템에서 가장 핵심적인 부분은 Proxy를 이용한 reactive API이다.

 

ref는 proxy 대신 객체의 getter/setter로 반응성을 관리하지만, 이 역시 Vue의 반응성 시스템과 통합되어 UI를 업데이트하는 동일한 메커니즘으로 작동한다.

 

ref도 결국 Vue의 반응성 흐름에 포함되며, 값의 변경을 추적하고 UI 갱신을 트리거하는 점에서는 동일한 반응성 시스템의 일부이다.