목록2026/03/20 (1)

민혁이의 IT스토리

[Mini React 만들기 #3] - 리랜더링 구현하기

Intro지금까지 JSX를 가상 DOM 객체로 변환(createElement)하고, 브라우저가 한가할 틈을 타 이 뼈대를 바탕으로 화면을 그려내는 동시성 렌더링 과정(workLoop, performUnitOfWork)을 구현했습니다.하지만 실제 웹 애플리케이션의 화면은 멈춰있지 않습니다. 버튼을 누르면 숫자가 변하고, 탭을 이동하면 새로운 창이 뜹니다. 만약 상태가 변할 때마다 기존의 화면(DOM)을 처음부터 다 부수고 새로 만든다면 어떻게 될까요? 우리의 브라우저는 무거운 렌더링 비용을 감당하지 못하고 결국 멈춰버리고 말 것입니다. 이번 3편에서는 리액트가 기존의 화면 요소(DOM 노드)는 버리지 않고 재사용하면서, 바뀐 속성과 내용만 아주 영리하게 갈아끼우는 과정, 즉 가상 DOM 업데이트 체계를 ..
혼자 공부해서 개발까지/JavaScript 2026. 3. 20. 00:50
이전 Prev 1 Next 다음