리액트가 '바뀐 놈'만 골라내는 법: Diffing 알고리즘

리액트를 쓰다 보면 아무 생각 없이 setState를 던질 때가 있습니다. 그런데 신기하게도 화면 전체를 다시 그리지 않습니다.

딱 바뀐 부분만 조용히 고쳐 놓습니다. 보통은 이걸 두고 "가상 DOM(Virtual DOM) 덕분이다"라고 말합니다.

맞는 말이긴 합니다. 하지만 가상 DOM 자체는 그냥 메모리에 떠 있는 자바스크립트 객체일 뿐입니다.

진짜 핵심은 따로 있습니다. “어디가 달라졌는지 찾아내는 계산” 바로 Diffing 알고리즘입니다.

가상 돔을 쓰는 실질적인 이유 진짜 DOM은 생각보다 예민합니다. DOM을 직접 건드리면 브라우저는 레이아웃을 다시 계산하거나(Reflow) 다시 그려야 할 수도 있습니다(Repaint).

이 작업이 반복되면 성능이 금방 무거워집니다. 그래서 리액트는 진짜 DOM을 바로 건드리지 않습니다.

대신 메모리라는 연습장에 먼저 변경 사항을 시뮬레이션합니다. 그리고 계산이 끝나면 진짜 DOM에는 딱 필요한 만큼만 최소한의 변경만 요청합니다.

리액트의...