layout은 공유 껍데기, page는 고유 화면, 서버 컴포넌트는 App Router의 기본 실행 위치다
세 개의 관계를 잡으면 App Router 구조를 읽는 기준이 선명해진다.
| 요소 | 맡는 역할 | 필수 규칙 | 처음 확인할 것 |
|---|---|---|---|
| Root layout | 모든 페이지를 감싸는 최상위 HTML 구조 | html/body와 children 포함 | src/app/layout.tsx |
| Nested layout | 특정 세그먼트 아래 공통 UI | 하위 경로에만 영향 | 어느 폴더에 놓였는지 |
| page.tsx | 해당 URL의 고유 화면 | 접근 가능한 페이지를 만듦 | URL과 폴더의 대응 |
| Server Component | 기본 렌더링 위치 | 비밀값과 데이터 접근을 서버에 유지 | use client가 없는 파일 |
| Client Component | 브라우저 상호작용 | 파일 상단 use client | 상태/이벤트가 필요한지 |