post-thumbnail

react rendering은 어떻게 일어나는가

rendering이란 무엇인가 props, state 를 통해 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업 rendering 프로세스 살펴보기 루트 컴포넌트에서 시작해서 업데이트가 필요하다고 플래그가 지정된 모든 컴포넌트를 찾는다. 지정되었다면 FunctionComponent()를 호출하고 렌더링 결과를 저장한다. 컴포넌트 반환값은 React.createELement()를 호출 후 반환한다. createElement는 UI 구조를 설명하는 React Element를 리턴한다. 모든 컴포넌트에서 이런 렌더링 반환값을 수집한다. react는 DOM을 가상DOM과 비교하며 변경사항을 수집한다. (이를 reconciliation라고 한다.) 모든 변경사항을 하나의 동기 시퀀스로 DOM에 적용한다. 렌더와 커밋 단계 Render phase: 컴포넌트를 렌더링하고 변경사항을 계산하는 모든 작업 Commit phase: DOM에 변

2023년 3월 23일
·
0개의 댓글
·