최초 렌더링

1. 함수 컴포넌트 호출

이 단계에서는 정의된 함수 컴포넌트(JSX를 리턴하는 함수, element를 리턴하는 함수)를 실행한다. 컴포넌트 내의 props, state, hook 등은 리액트의 Fiber객체에 의해 관리되고, 이에 따라 함수 내 구현부를 준비한다.

그리고 이를 토대로 JSX를 리턴함으로써 본격적인 렌더링이 시작된다.

2. 렌더 및 커밋 단계(Render Phase & Commit Phase)

렌더 단계에서는 새로운 가상 DOM을 생성한다. 그리고 커밋 단계에서는 이를 실제 DOM에 반영한다.

3. passive effect

커밋 이후에는 useLayoutEffect가 실행된다. 이는 useEffect와 달리 브라우저 화면에 가시적인 변화가 생기기 전에 동기적으로 실행된다. 그리고 짧은 timeout 세팅 이후 화면이 그려지고(paint) 그 다음 useEffect가 실행된다.

이 단계에서도 setState() 등의 원인으로 또 다시 렌더링이 시작될 수 있다.

4. 결과

렌더링 결과물이 DOM에 반영되고 화면이 그려진다. 물론 렌더링이 끝난 이후에도 가시적인 변화가 없을 수도 있다. 컴포넌트가 이전과 같은 렌더링 결과물을 리턴한다면 화면상에서는 아무런 변화가 없을 것이다. 또한 React 18의 Concurrent Mode에서는 브라우저 이벤트 처리를 위해 렌더링을 일시중지하는 것이 가능하다. 이 때 해당 작업은 다시 시작되거나 버리게 된다.

따라서 이 때 해당 컴포넌트는 여러 번 렌더링될 수 있다.

리렌더링

리렌더링은 리렌더링 조건들 중 하나에 의해 발생하고, 그 과정은 최초 렌더링과 다를 바 없다. 그러나 각 단계별로 이루어지는 일은 살짝 다를 수 있다.

1. 함수 컴포넌트