1. 함수 컴포넌트 호출

2. 구현부 실행

• props 취득, hook 실행, 내부 변수 및 함수 생성
• 단, hook에 등록해둔 상태값, 부수함수 효과 등은 별도 메모리에 저장되어 관리된다.

3. return 실행

• 렌더링 시작

4. 렌더 단계(Render Phase)

• 가상 DOM을 생성한다.

5. 프리커밋 단계(Pre-Commit Phase)

• DOM을 읽을 수 있습니다.

6. 커밋 단계(Commit Phase)

• 실제 DOM에 반영한다.

7. useLayoutEffect

• 브라우저 화면에 Paint 하기 전에, useLayoutEffect에 등록해둔 effect(부수효과함수)가 동기로 실행된다.