그럼에도 여전히 알아야 할 것들

리로드 없이 URL과 화면을 동기화해야 하는데, 이 흐름이 어긋나면 뒤로가기와 데이터 페칭이 같이 깨진다.

Error Boundary는 렌더 콜스택의 동기 예외만 잡고, 이후 큐에서 깨어난 비동기 에러는 경계 밖이다.

Trigger·Render·Commit 3단계 중 실제 DOM이 바뀌는 건 Commit뿐이라는 점이 성능 분석의 출발점이다.

훅은 호출 순서로 상태 슬롯을 잡는다 — 순서가 어긋나는 순간 어느 슬롯이 어디로 가는지 통제 불능이 된다.

실제 DOM 변경 비용을 줄이려고 diff와 휴리스틱 비용을 감수하는 React의 렌더링 모델.

입력 반응성 확보와 렌더 중단·재시도 비용 사이에서 동시성 훅을 어디에 박을지 가르는 판단

key는 _아이템의 정체성_이라, index를 쓰면 정렬/삽입 시 React가 엉뚱한 컴포넌트를 재사용한다.

렌더 트리 어디에 경계를 그어 어떤 실패까지 격리할지의 결정 — 위치 선택이 곧 설계가 된다.

둘 다 commit 이후 실행되지만 useLayoutEffect는 페인트 _전_ 동기, useEffect는 페인트 _후_ 비동기다.

commit 이후 페인트 후 비동기 실행, 의존성 변화 전·언마운트 시 cleanup이 도는 _수명주기 모델_이다.

JSX는 빌드 단계에서 React.createElement 또는 jsx-runtime 호출로 풀려 객체 트리(React element)를 만들어 낸다.

DOM에 직접 손을 대거나, "바뀌어도 화면은 다시 안 그려도 되는" 값을 들고 있을 때 쓰는 훅.