[Next.js] 레이아웃(layout.js)과 메타데이터(Metadata)의 이해
page.js가 각 페이지의 구체적인 내용이라면,layout.js는 이를 감싸는 공통의 뼈대와 환경 설정을 담당함
키워드: Root Layout, Children Props, Nested Layout, Metadata SEO
1. layout.js의 정의와 역할
layout.js는 하나 이상의 페이지를 감싸는 공통의 껍데기(Shell)입니다. 헤더, 푸터, 내비게이션 바처럼 모든 페이지에서 반복되는 요소들을 한 곳에서 관리합니다.
2. 루트 레이아웃(Root Layout)의 필수성
app 폴더 최상위의 layout.js는 애플리케이션의 근본입니다. 리액트 컴포넌트임에도 불구하고 <html>과 <body> 태그를 직접 렌더링해야 하는 필수 파일입니다.
3. children 속성과 페이지 삽입
레이아웃은 리액트의 표준 속성인 children을 통해 내용을 전달받습니다.
- 동작: 사용자가 접속한 경로의
page.js가 레이아웃의{children}자리로 자동 조립됩니다.
4. 중첩 레이아웃 (Nested Layout)
특정 하위 폴더에도 레이아웃을 추가할 수 있으며, 이는 해당 섹션(예: 관리자 페이지, 마이페이지)에만 특화된 디자인을 적용할 때 유용합니다.
5. 메타데이터(Metadata)와 SEO
Next.js에서는 <head> 태그를 직접 쓰지 않고 약속된 metadata 객체를 사용합니다.
- 자동 처리:
export const metadata = { title: '...', description: '...' }라고 정의하면 Next.js가 이면에서 메타 태그를 생성합니다. - 상속: 상위 레이아웃의 메타데이터는 하위 페이지로 자연스럽게 이어집니다.
19. [Next.js] 서버 컴포넌트(RSC) vs 클라이언트 컴포넌트(RCC)
코드가 서버(Node.js)에서 실행되는지, 브라우저(클라이언트)에서 실행되는지에 따라 성능과 기능이 결정됨
1. 리액트 서버 컴포넌트 (React Server Components, RSC)
Next.js의 모든 컴포넌트는 별도 설정이 없다면 기본적으로 서버 컴포넌트입니다.
- 실행 위치: 브라우저가 아닌 백엔드 서버에서 실행됩니다.
- 장점:
- 자바스크립트 번들 크기가 줄어들어 성능 향상.
- 완성된 HTML을 보내주므로 SEO(검색 엔진 최적화)에 매우 유리.
- 특징:
console.log가 브라우저가 아닌 터미널에 찍힙니다.
2. 클라이언트 컴포넌트 (Client Components, RCC)
브라우저 전용 기능이나 사용자와의 실시간 상호작용이 필요한 경우 사용합니다.
- 사용법: 파일 최상단에
'use client';지시어를 추가합니다. - 언제 사용하나?
- 상태 및 생명주기:
useState,useEffect사용 시. - 이벤트:
onClick,onChange핸들러 사용 시. - 브라우저 API:
window,localStorage접근 시.
- 상태 및 생명주기:
3. 왜 기본이 서버 컴포넌트일까? (비교)
| 구분 | 일반 리액트 (CSR) | Next.js 서버 컴포넌트 (RSC) |
|---|---|---|
| 초기 HTML | 빈 껍데기 (div id="root") | 모든 컨텐츠가 채워진 HTML |
| JS 로드량 | 전체 로직 다운로드 (무거움) | 필요한 최소 코드만 전송 (가벼움) |
| SEO | 불리함 | 매우 유리함 |
4. 실전 예시: ImageSlideshow 컴포넌트
슬라이드쇼처럼 setInterval이나 useState를 써서 실시간으로 화면을 바꿔야 하는 경우, 서버는 브라우저의 미래 상황을 예측할 수 없으므로 반드시 클라이언트 컴포넌트로 작성해야 합니다.
'use client'; // 이 컴포넌트는 이제 브라우저에서 생동감 있게 움직입니다.
import { useEffect, useState } from 'react';
// ... 5초마다 이미지를 바꾸는 로직 (브라우저 메모리와 타이머 사용)
열심히 기록할 예정🙃