렌더링

브라우저의 렌더링 과정브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받음브라우저의 렌더링 엔진은 서버로부터 응답된 HTML, CSS를 파싱해 DOM과 CSSOM을 생성하고 이들을 결합해 렌더 트리를 생성함브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱해 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환해 실행함. 이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있음. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합됨렌더 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)를 계산하고 브라우저 화면에 HTML 요소를 페인팅함 파싱 : 프로그래밍 언어의 문법에..

렌더링이란? 렌더링이란 현재 props 및 상태를 기반으로 코드로 정의된 내용이 실제 브라우저 화면에 그려지는 과정 이때, DOM이란 웹 사이트를 열 때 화면에 표시되는 내용을 마크업 언어인 HTML을 통해 표현하는 것 렌더링 발생 조건 컴포넌트의 상태 변경 (setState 함수 실행할 때 React 트리거 업데이트 됨) props가 변경되어도 업데이트 되지 않는 이유? props를 setState로 올바르게 업데이트하지 않았거나, props의 참조가 동일할 경우 혹은 props자체는 부모 컴포넌트가 렌더링 될 때 가져오기 때문에 부모의 렌더링이 일어나지 않으면 props가 교체되지 않음 부모 컴포넌트 랜더링 ⇒ 부모 컴포넌트가 렌더링 될 시 하위 컴포넌트는 모두 렌더링됨(리액트는 기본적으로 컴포넌트를..