민혁이의 IT스토리

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

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

Intro지난 포스팅에서는 createElement로 가상 DOM(설계도)을 만들고, render 함수에서 재귀(Recursion)를 사용해 실제 브라우저 DOM에 노드를 그려보았습니다. 드디어 화면에 우리가 짠 코드가 렌더링되는 기쁨을 맛봤죠 하지만, 우리가 만든 초기 render 함수에는 아주 치명적인 문제가 하나 숨어있었습니다.// 이전 포스팅의 문제점: 한 번 시작하면 멈출 수 없는 렌더링function render(element, container) { // ... DOM 생성 ... element.props.children.forEach(child => render(child, dom));} 트리 구조를 순회하기 위해 재귀 호출을 사용했기 때문에, 트리가 엄청나게 깊고 거대해지면 브라우저는..

Intro"도대체 JSX는 어떻게 브라우저 화면에 나타나는 걸까?" 우리는 매일 리액트로 개발을 하지만, 정작 npm start 뒤에서 일어나는 일은 마법처럼 느껴질 때가 많습니다. 단순히 라이브러리를 가져다 쓰는 것을 넘어, 리액트의 블랙박스를 열어보고 그 내부 원리를 깊이 이해하고 싶었습니다. 그래서 결심했습니다. "직접 한번 만들어보자!" 이번 포스팅에서는 리액트의 가장 심장이 되는 두 가지 함수, createElement(설계도 그리기)와 render(실제 건축하기)를 바닐라 자바스크립트로 구현한 과정을 기록합니다. 핵심 개념Virtual DOM: 가벼운 설계도 우리가 작성하는 JSX(...)는 사실 HTML이 아닙니다. 결국은 자바스크립트 객체일 뿐이죠. 이를 우리는 Virtual DOM(가상 ..