[React] 리액트 렌더링에 대해서

React Rendering Study 렌더링 렌더링 프로세스 JSX → React.createElement → 객체 → 실제 함수 호출 reconciliation(재조정): 컴포넌트 트리 전체에서 렌더 출력을 수집한 후 리액트는 새로운 객체 트리와 비교해 실제 DOM을 현재 원하는 출력과 같아 보이게 하기 위해 적용해야 할 모든 변경 사항 목록을 수집 여기서 말하는 새로운 객체 트리는 일반적으로 가상의 DOM을 의미하나 항상 그런 것은 아님. 렌더 및 커밋 렌더 단계: componentDidMount, componentDidUpdate와 같은 클래스 라이프 사이클 메서드와 useLayoutEffect가 실행됨. 이후 useEffect 훅을 실행하는데 이 단계를 패시브 이펙트(Passive Effects) 단계라고도 함. useLayoutEffect: useEffect와 동일한 기능을 제공하는 훅인데, 브라우저가 화면을 그리기 전에 실행됨. 반면 리액트 18부터는 동시 렌더링 기능도...

원문링크 : [React] 리액트 렌더링에 대해서