SPA - 데이터 변경 감지 (Vue 설명 포함)

데이터 변경 감지

• SPA에서 데이터가 변경되면 데이터 변경을 감지하고 자동으로 화면을 렌더링 한다.
• 데이터를 SPA에서는 state 라 칭한다.
• 컴포넌트가 다시 렌더링 되는 조건
  • state 변경
  • props 변경
  • 중앙 상태값(redux, vuex...) 변경
  • 부모 컴포넌트 재렌더링에 따라 자식 컴포넌트 재렌더링
• state는 set 메서드를 통해 업데이트 되어야 SPA 프레임워크 or 라이브러리에서 변경을 감지하고 다시 렌더링 한다.
  • 정확하게 하면 set 메서드는 state 변경을 요청 하는 것
  • react는 setState or useState
  • vue는 data에 정의된 state의 경우 변경시 자동으로 setter를 호출해서 수행
• SPA는 성능 최적화를 위해 DOM 업데이트를 비동기, 배치로 처리한다.
• state 업데이트 시점은 다음 렌더링 사이클이 실행되기 이전에 반영되어 렌더링 사이클 진행 후 화면에 출력한다.

1. state 변경 (set 사용)
2. 작업 큐에 "변경 작업 예약" 등록
3. 다음 렌더링 사이클을 위한 작업 등록
4. 비동기 작업이기 때문에 다른 코드가 있다면 작업 수행
5. 다음 렌더링 사이클 이전에 작업 큐에 있는 변경 요청 수행
6. 렌더링 사이클 수행
7. 화면 출력

위 과정에서 5번 이후에 변경 작업 예약이 등록된다면, 현재 렌더링 사이클(6번)에서 반영되지 않고 다음 렌더링 사이클에 반영되어 진행된다.

vue

• 변경 감지되는 속성은 data() {count: 0, value: 3, id: 'test'} 와 같이 data 안에 옵션으로 정의되어 있어야 한다.
• 옵션으로 정의된 값들에 대해 vue 내부에서 데이터에 접근하거나, 수정이 이뤄지면 자동으로 getter/setter로 변환되어 수행한다.
• 모든 컴포넌트 인스턴스에는 watcher 인스턴스가 있으며, 이 인스턴스는 컴포넌트가 종속적으로 렌더링되는 동안 수정된 모든 속성을 기록
  • watcher를 통해 setter가 트리거 됐음을 알리고, 변경 작업을 수행한다.