TypeScript, import, Hooks, Hydration은 각각 다른 층의 규칙 위반이다
오류명을 외우기보다 어떤 규칙을 어겼는지 나누면 수정 위치가 빨리 정해진다.
| 오류 유형 | 깨진 규칙 | 대표 신호 | 수정 위치 |
|---|---|---|---|
| TypeScript | 값의 형태가 타입 선언과 다름 | Property does not exist | type, props, return 값 |
| Module import | 파일 경로와 패키지 해석 실패 | Module not found | 경로, 대소문자, package 설치 |
| Hooks | 훅은 컴포넌트 최상위에서만 호출 | Hook is called conditionally | 조건문 밖, custom hook |
| Hydration | 서버 HTML과 첫 클라이언트 렌더 불일치 | initial UI does not match | client-only 코드, HTML 구조 |