Vue의 반응성(Reactivity) 시스템 이해하기

1. 반응성 시스템이란?

Vue의 핵심 기능 중 하나인 반응성 시스템은 데이터의 변화를 감지하고, 그에 따라 화면을 자동으로 업데이트하는 메커니즘입니다.

2. 기본 구현 예제

HTML 구조

<div id="app">
    <!-- 이곳에 무언가 렌더링 된다. -->
</div>

JavaScript 구현

// 1. 반응형 데이터 정의
var data = {
    message: 10
}

// 2. 렌더링 함수
function render(sth) {
    var div = document.querySelector('#app');
    div.innerHTML = sth;
}

// 3. Proxy를 사용한 반응성 구현
var app = new Proxy(data, {
    get() {
        console.log('값 접근')
    },
    set(target, prop, newValue) {
        console.log('값 갱신')
        target[prop] = newValue;
        render(newValue);
    }
})

3. 핵심 개념 설명

Proxy 객체

• JavaScript의 Proxy 객체는 객체의 기본 동작을 가로채서 새로운 동작을 정의할 수 있게 해줍니다.
• Vue 3는 내부적으로 Proxy를 사용하여 반응성 시스템을 구현합니다.

핸들러 함수

1. get 핸들러

   • 데이터에 접근할 때 호출됩니다.
   • 의존성 추적에 사용됩니다.

2. set 핸들러

   • 데이터가 변경될 때 호출됩니다.
   • 변경된 값을 화면에 반영합니다.

4. 작동 방식

1. app.message에 접근하면 get 핸들러가 호출되어 "값 접근" 로그가 출력됩니다.
2. app.message = 20과 같이 값을 변경하면:
   • set 핸들러가 호출됩니다.
   • "값 갱신" 로그가 출력됩니다.
   • 새로운 값이 화면에 렌더링됩니다.

5. Vue의 실제 반응성 시스템

• Vue는 이 예제보다 더 복잡한 반응성 시스템을 사용합니다.
• 주요 특징:
  • 의존성 추적
  • 중첩된 객체 처리
  • 배열 변경 감지
  • 성능 최적화

6. 학습 포인트

• 반응성의 기본 원리 이해
• Proxy 객체의 활용
• 데이터 변경과 화면 업데이트의 연결
• Vue의 내부 동작 방식 이해

7. 테스트 방법

콘솔에서 테스트

브라우저의 개발자 도구 콘솔에서 다음 명령어들을 순서대로 실행해보세요:

// 1. 현재 값 확인
console.log(app.message)  // "값 접근" 로그와 함께 10 출력

// 2. 값 변경 테스트
app.message = 20  // "값 갱신" 로그와 함께 화면이 20으로 업데이트

// 3. 다른 값으로 변경
app.message = "안녕하세요"  // "값 갱신" 로그와 함께 화면이 "안녕하세요"로 업데이트

이 예제는 Vue의 반응성 시스템의 기본 원리를 이해하는 데 도움이 됩니다. 실제 Vue는 더 복잡한 구현을 사용하지만, 이 기본 개념을 이해하면 Vue의 동작 방식을 더 잘 이해할 수 있습니다.