[React] 렌더링

수민🐣·2023년 3월 29일
0

React

목록 보기
26/36

렌더링이란?

화면에 특정한 요소를 그려내는 것

브라우저에서 렌더링이란 결국 DOM 요소를 계산하고 그려내는 것을 의미

HTML과 CSS를 통해서 만들어지고 계산된 DOM과 CSSOM은 결합되고, 위치를 계산하고, 최종적으로 브라우저에 그려진다.

우리는 브라우저에서 제공하는 DOM API를 JavaScript를 통해 호출하면서 브라우저에 그려진 화면을 변화시킨다.

명령형 : Vanila JavaScript를 이용해서 DOM에 직접 접근하고 수정하는 것

선언형 : 보여주고 싶은 핵심 UI를 “선언”하기만 하면 실제로 DOM을 조작해서 UI를 그려내고, 변화시키는 일은 라이브러리나 프레임워크가 대신 해주는 방식

➡ React, Vue, Angular등의 라이브러리, 프레임워크가 등장하게 되고 그 중에서 React가 현재는 가장 많이 사용되고 있는 것

➡ 실제 렌더링 과정은 React에서 대신 처리해주고, 개발자는 UI를 설계하는대만 집중

하지만 때로는 React 내부에서 처리해주는 렌더링을 최적화 해야 되는 상황이 발생

0개의 댓글