React로 개발을 하다보면 원하지 않는 시점에 컴포넌트가 재렌더링 되는 경우가 있다. 이러한 현상을 보고 있으면 스트레스를 받아 성능을 최적화 해야겠다는 생각이 들게된다. 이럴 때 사용할 수 있는 기법 중 하나가 오늘의 주제 “Memoization” 이다. Memoization 이란?컴퓨터가 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로서 동일한 계산을 하지 않도록 하여, 속도를 높이는 기술이다. 보통 애플리케이션의 최적화를 위해 사용된다.리액트에서 리렌더링이 일어나는 조건컴포넌트의 state가 변경되었을 때컴포넌트가 상속받은 props가 변경되었을 때부모 컴포넌트가 리렌더링이 된 경우 모든 자식 컴포넌트는 리렌더링React 에서 Memoization을 하는 대표적인 방법Mem..

이전 글에서 알아봤던 기초적인 브라우저 렌더링 과정을 넘어 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 요소는 중첩 관계를 갖는다. 중첩관계에 의해 부자 관계가 형성된다. 이러한 부자 관계..