Layout & Template — 공통 레이아웃 시스템 마스터
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. `layout.tsx`와 `template.tsx`의 가장 중요한 차이점은?
💡 layout.tsx는 페이지 전환 시 리렌더링되지 않아 상태(스크롤, 입력값 등)를 유지합니다. 반면 template.tsx는 페이지 전환마다 새로 마운트(리렌더링)되어 상태가 초기화됩니다. 이 특성 때문에 layout은 공통 UI에, template은 페이지 진입 애니메이션이나 추적 이벤트에 사용합니다.
Q2. `/dashboard/settings`에 접근할 때 렌더링되는 레이아웃의 순서는? (app/layout.tsx, app/dashboard/layout.tsx, app/dashboard/settings/layout.tsx 존재 시)
💡 Next.js App Router는 중첩 레이아웃을 계층 구조로 적용합니다. 루트 layout이 가장 바깥을 감싸고, 경로에 해당하는 모든 레이아웃이 안쪽에 중첩됩니다. 따라서 app/layout → dashboard/layout → settings/layout → 페이지 순서로 감싸집니다.
Q3. Route Groups `(name)`을 사용하는 주요 목적은?
💡 Route Groups `(name)`의 핵심 목적은 URL 구조에 영향을 주지 않으면서 관련 페이지들을 논리적으로 그룹화하고, 각 그룹에 서로 다른 레이아웃을 적용하는 것입니다. 예를 들어 (auth) 그룹에는 로그인 전용 레이아웃을, (dashboard) 그룹에는 사이드바가 있는 레이아웃을 적용할 수 있습니다.
Q4. 하위 layout.tsx에서 `<html>`과 `<body>` 태그를 포함하면?
💡 `<html>`과 `<body>` 태그는 오직 루트 layout.tsx(app/layout.tsx)에서만 정의해야 합니다. 하위 레이아웃에 이 태그들을 추가하면 Next.js가 빌드 에러를 발생시킵니다. 하위 레이아웃은 `<div>` 등 일반 HTML 요소로 콘텐츠를 감싸야 합니다.
Q5. 레이아웃(`layout.tsx`)에서 서버 데이터를 가져오려면?
💡 `layout.tsx`는 기본적으로 Server Component이므로 `async` 함수로 선언하고 `await`을 사용하여 서버에서 직접 데이터를 가져올 수 있습니다. 이를 통해 레이아웃에 로그인한 사용자 정보, 네비게이션 데이터 등을 서버에서 렌더링할 수 있어 초기 로딩 성능이 향상됩니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.