함수형 컴포넌트 렌더링 트리거
1. Props또는 state 변경시
2. 부모 컴포넌트 리렌더링
렌더링 순서
- 초기 렌더링
- 컴포넌트 업데이트
- state, props 변경시 리렌더링 시작
- 함수형 컴포넌트 전체 함수가 다시 실행( JSX 코드 반환 )
- (반환된 JSX 코드는 createElement함수를 통해) 새로운 VDOM 트리로 변환(생성)
- VDOM 비교
- VDOM 업데이트
- 실제 DOM 업데이트: DOM에 반영하여 브라우저에 업데이트
custom Hooks의 경우, JSX를 반환하지 않고 VDOM을 생성하지도 않는데 useEffect가 Mount, Update, unMount일 때도 실행된다는 건
부모의 컴포넌트에서 리렌더링 되었기 때문
'Front-End > React.js' 카테고리의 다른 글
| component와 hook 에 적용한 SOLID - [hook 편] (0) | 2024.07.21 |
|---|---|
| useEffect 의존성 제거 (0) | 2024.01.23 |
| 2장 올림픽 통계 서비스 최적화(1/2) [프론트엔드 성능 최적화 가이드] (0) | 2023.06.26 |
| useEffect (0) | 2023.03.28 |
| Virtual DOM (0) | 2023.03.23 |
