React [리렌더링 과정]

들어가기 전

리엑트가 인기있는 이유는 효율적인 렌더링 방식에 있다.

ReactDOM은 엘리먼트를 랜더링할 때, 이전 엘리먼트와 비교하여 변경된 부분만 업데이트한다.

render()

render()함수는 내부 컴포넌트 재귀적 렌더링, 뷰의 정보를 담은 객체로 변환하여 반환을 한다.

1. 랜더링 시작: 내부 컴포넌트를 시작으로 최상위 컴포넌트를 렌더링해간다.
2. 마크업 생성: 최상위 컴포넌트 렌더링 작업이 끝나면, HTML 마크업을 만든다.
3. DOM 주입, 표시: 해당 마크업을 실제 페이지의 DOM요소 안에 주입하여, 화면에 표시한다.

리 렌더링

https://felixgerschau.com/react-rerender-components/

When does React re-render components?

Reconcilation(재조정)

https://reactjs-kr.firebaseapp.com/docs/reconciliation.html#recursing-on-children