[ Vue ] Vue 3의 반응성 시스템 (proxy 기반 자동 반응성)

Vue 2의 한계

Vue 2에서 사용된 Object.defineProperty 는 객체의 각 속성에 접근할 때마다 getter와 setter를 설정하여 반응성을 제공하는 방식이다.

해당 방식은 몇 가지 한계를 가지고 있다.

• 새 속성 추가 : 이미 존재하는 속성에 대해서만 반응성을 적용할 수 있기 때문에, 객체에 새 속성을 추가하거나 배열의 특정 항목을 변경하는 경우 반응성을 처리하지 못했다.
• 배열 처리 : 배열의 특정 인덱스 변경이나 크기 조작도 반응성 시스템에서 추적되지 않는다.
• 성능 문제 : 큰 객체의 모든 속성에 일일이 getter와 setter를 정의하는 방식이므로, 특히 중첩된 객체 구조에서는 성능과 메모리 사용량 면에서 부담이 있었다.

 

 

Vue 3에서의 Proxy 기반 반응성 구현

Vue 3의 반응성 시스템은 Proxy를 사용하여 객체나 배열의 모든 작업을 감지하고, 이를 기반으로 UI를 업데이트한다.

→ reactivity()

Proxy의 handler(traps)를 통해 객체의 속성 추가, 삭제, 읽기, 쓰기 등의 모든 작업을 더 효율적이고 유연하게 처리할 수 있다.

 

 

Proxy 객체

Proxy - JavaScript | MDN

Proxy 객체를 사용하면 한 객체에 대한 기본 작업을 가로채고 재정의하는 프록시를 만들 수 있다.

일반적으로 속성 액세스를 기록하고, 입력의 유효성을 검사하고, 형식을 지정하거나, 삭제하는 데 사용된다.

두 개의 매개변수를 사용하여 Proxy를 생성한다.

• target : 프록시할 원본 객체
• handler : 가로채는 작업과 가로채는 작업을 재정의하는 방법을 정의하는 객체 (= traps)

 

 

그러나 ref는 proxy 기반이 아니다.

ref는 객체의 속성을 사용하여 값에 대한 반응성을 제공한다.

 

ref의 동작 방식

ref는 값(기본형 또는 객체)를 감싸는 객체를 반환하며, 이 객체는 .value 라는 속성을 통해 원시 값에 접근한다.

.value 속성에 대한 getter와 setter가 동작하며 반응성을 관리한다.

 

proxy와의 차이

proxy는 복잡한 객체나 배열의 구조를 감시하고, 속성 추가 및 삭제까지도 처리하지만, ref는 단일 값에 대한 반응성을 단순하게 제공한다.

그렇기 때문에 ref는 주로 원시 값이나 단순 객체를 반응형으로 만들기 위해 사용된다.