이전 글에서 알아봤던 기초적인 브라우저 렌더링 과정을 넘어 React의 렌더링 과정도 같이 살펴보자. 1. React의 탄생  배경 : JavaScript의 성능 개선React가 등장한 이유 중 하나는 JavaScript로 DOM을 동적 생성하거나 수정을 할 때 발생하는 Reflow와 Repaint는 비용이 많이 듦으로 과정을 최소화하기 위해서이다. React는 이런 문제를 해결하기 위해 Virtual DOM 개념을 도입하고, 업데이트 과정을 효율적으로 처리한다. DOM 업데이트 최적화아래 코드 예제를 통해 잘못된 코드와 최적화된 코드의 성능 차이를 확인해 보자.잘못된 코드 예시3,000번 DOM을 생성성능 측정 결과: 3,092ms 좋은 코드 예시DOM은 딱 한 번만 생성성능 측정 결과: 3.5ms (..

가장 기초적인 브라우저에서 렌더링 하는 과정을 살펴보자.브라우저는 HTML. CSS. JavaScript 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. 1. HTML 파싱과 DOM 생성: 렌더링의 첫 단계서버로부터 응답받은 HTML 문서를 바이트 형태로 받는다.응답받은 바이트 형태의 HTML 문서는 `meta` 태그의 charset attribute에 지정된 인코딩 방식(예: UTF-8)을 기준으로 문자열로 변환된다.문자열로 변환된 문서를 문법적 의미를 갖는 코드의 최소 단위인 토큰들로 분해한다.각 토큰들을 객체로 변환하여 노드들을 생성한다.HTML 문서는 HTML 요소들의 집합으로 이루어지며 HTML 요소는 중첩 관계를 갖는다. 중첩관계에 의해 부자 관계가 형성된다. 이러한 부자 관계..