proxy state Proxy는 쓰기 지점을 모아 렌더를 예약한다 상태 객체 앞에 Proxy를 두면 set 트랩에서 기본 할당, 변경 비교, 렌더 예약을 한 경계에서 처리할 수 있다.
지점 역할 주의 검증
Action상태 쓰기 클릭, 입력, 비동기 응답이 상태 프로퍼티 변경을 만든다. DOM을 직접 바꾸면 상태와 화면의 기준이 갈라진다. 모든 변경이 상태 쓰기를 통해 시작되는지 추적한다.
set trap감지 경계 어떤 key가 어떤 값으로 바뀌는지 한곳에서 본다. 중첩 객체는 별도 Proxy가 없으면 내부 변경을 놓친다. 변경 로그가 key, old value, new value를 남긴다.
Reflect.set기본 동작 원래 객체의 할당 규칙과 반환값을 보존한다. 반환값을 무시하면 실패한 할당도 성공처럼 보일 수 있다. 성공한 할당에서만 이후 렌더 예약이 실행된다.
Render queue화면 갱신 여러 변경을 묶어 다음 프레임 DOM 갱신으로 보낸다. 매 변경마다 즉시 렌더하면 입력 중 화면이 흔들린다. 같은 프레임의 중복 변경이 한 번의 갱신으로 합쳐진다.
DevTools원인 추적 상태 변경 로그와 브레이크포인트로 화면 변경 원인을 찾는다. 렌더 결과만 보면 어떤 상태가 원인인지 늦게 찾는다. 문제 화면에서 마지막 상태 변경자를 확인할 수 있다.