민혁이의 IT스토리

Intro이전 3편에서는 가상 DOM을 활용하여 변경된 속성과 이벤트만 영리하게 갈아끼우는 '업데이트 파이프라인(Reconciliation & Diffing)'을 완성했습니다. 이제 리액트는 불필요한 DOM 조작을 피해 아주 빠르고 가볍게 렌더링을 수행할 수 있게 되었습니다.하지만 치명적인 한계가 남아있습니다. 지금까지는 , 같은 일반 HTML 태그(Host Component)만 다룰 수 있었습니다. 복잡한 웹 애플리케이션을 만들기 위해 코드를 재사용 가능한 블록으로 쪼개는 일, 즉 같은 '함수형 컴포넌트(Function Component)'를 사용할 수 없는 반쪽짜리 리액트였죠.또한, 함수형 컴포넌트 안에서 값이 변할 때마다 화면이 스스로 업데이트 되게 만드는 State도 필요합니다. 이번 4편에서..

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