레이아웃의 작동 방식

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Next.js를 사용하는 웹 개발자, 특히 레이아웃 구조 설계에 관심 있는 분

핵심 요약

• layout.tsx는 React component를 children으로 받아 헤더, 푸터 등 공통 컴포넌트를 구성
• app 디렉토리의 기본 layout.tsx는 삭제 불가로, 삭제 시 자동 재생성
• page.tsx는 layout.tsx와 동일한 디렉토리에 있어야 경로 접근 가능

섹션별 세부 요약

1. 레이아웃 파일의 역할

• layout.tsx는 app 디렉토리의 모든 page.tsx 파일을 자동으로 감싸 UI 생성
• 파일 시스템 규칙에 따라 layout.tsx를 수동으로 import하거나 연결할 필요 없음

1. 디렉토리 구조 예시

• app/user/username/layout.tsx와 같은 중첩 디렉토리에서 layout.tsx를 생성하면 상위 레이아웃 렌더링 중단
• page.tsx가 layout.tsx와 동일한 디렉토리에 있어야 경로 접근 가능

1. 경로 접근성 조건

• layout.tsx는 경로를 생성하지 않음, page.tsx가 반드시 존재해야 경로 활성화
• /user/username 경로에 page.tsx가 없으면 404 에러 발생

결론

Next.js의 레이아웃은 파일 시스템 규칙을 기반으로 자동 생성되며, 중첩된 layout.tsx는 하위 경로에 대한 루트 레이아웃으로 작동. page.tsx와 layout.tsx의 디렉토리 위치 관계를 철저히 확인해야 하며, page.tsx는 반드시 존재해야 경로가 활성화됨. 실무에서는 중첩 레이아웃의 계층 구조와 경로 접근성을 고려한 디렉토리 설계가 필수적.