[Udemy Vue 완벽가이드 Section5] 61. Vue 반응성 심층 분석

let message = 'Hello!';
let longMessage = message + ' World!';
console.log(longMessage); // 'Hello! World!'

message = 'Hello!!!';
console.log(longMessage);// 'Hello! World!' 전혀 바뀌지 않는다.

변수 message에 새 값을 할당하여도 longMessage값은 바뀌지 않았다.

why?

기본적으로 JavaScript는 반응형이 아니기 때문.

 

let longMessage = message + ' World!';

위 코드에서 'message'라는 변수가 있고, 이후 이 변수에 변경사항이 생긴다고 하더라도 위 연산이 재실행되지는 않는다. 

즉, JavaScript가 message의 변경 사항을 반영하지 않는다. 이렇게 JS와 Vue의 작동원리에는 차이가 있다.

 

Vue는 내장 메커니즘을 통해 message의 변경사항을 인식하고, 앱에서 해당 messaged와 관련이 있는 부분을 update한다. 그리고 이 작업에서 Proxy를 사용한다.

 

---

Proxy

Proxy에 대해서 알아보자!

const data = {
 message: 'Hello!'
};

const handler = {
 set(target, key, value){
  console.log('target', target);//래핑된 객체 출력. {message: 'Hello!'}
  console.log('key', key);//새로운 값을 설정한 property의 key,여기서는 'message'가 출력
  console.log('value', value);//설정한 값인 'Hello!!!' 출력
  }
};
const proxy = new Proxy(data, handler);//new Proxy를 통해 JS프록시로 'data객체'를 래핑.(모던 JS에 내장된 생성자 함수)
//이 코드를 테스팅 할때는 Chrome과 같은 모던 브라우저에서 작업해야한다.
//data객체를 첫번째 인수로서 래핑. 따라서, proxy를 통해서 data의 property인 message에 액세스할 수 있다.
//new Proxy로 생성한 Proxy객체가 message 프로퍼티를 갖기 때문이다.
//Proxy는 상수로 저장한 다음, 래핑할 객체(data)를 입력한다.
//두번째 인수가 될 객체(handler)도 입력해야한다.이 객체는 래핑된 객체에 대한 핸들러를 담고 있는 객체여야한다.

proxy.message = 'Hello!!!';

 

handler객체

- 특정 기능을 사용할 수 있는데, Proxy가 지원하는 일명 트랩을 설정할 수 있다. ex: set 트랩

 

 

handler객체의 set함수

- 자동으로 target, key, value를 전송받는다.

- proxy에 새로운 프로퍼티가 설정될때마다 트러거된다. (ex: proxy.message = 'Hello!!!')

이를 통해 새로운 값이 설정된 프로퍼티(key)는 무엇이며, 설정된 새로운 값(value)은 무엇이고, 래핑된 객체(target)가 무엇인지 알 수 있다. 

 

 

const data = {
 message: 'Hello!',
 longMessage: 'Hello! World!'
};

const handler = {
 set(target, key, value){
  if(key === 'message') {
   target.longMessage = value + ' World!';
  }
  target.message = value;
};
const proxy = new Proxy(data, handler);
proxy.message = 'Hello!!!';

console.log(proxy.longMessage);// 'Hello!!! World!' 이렇게 변경된다. 
console.log(data.longMessage);// 'Hello!!! World!'
console.log(data.message);//'Hello!!!' handler객체의 set함수에서 target.message = value를 해야 변경된다.

이런 반응형 작업을 Vue가 내부적으로 한다.

Vue에서 모든 data프로퍼티를 추적하고, 프로퍼티에 변경사항이 발생하면 앱에서 해당 프로퍼티가 사용된 부분을 업데이트한다.

Proxy를 통해 data프로퍼티를 래핑하고, 새로운 값으로 설정할때 변경사항을 찾을 수 있다. 

 

이것이 바로 Vue의 작동원리!!!!!