병렬 라우트(Parallel Routes) 개념 설명
하나의 레이아웃 안에서 여러 개의 페이지를 동시에, 독립적으로 렌더링하는 기능. 일반적으로 하나의 URL은 하나의 페이지 컴포넌트만 매핑되나, 병렬 라우트를 사용하면 동일한 레이아웃 내에서 여러 '슬롯(Slot)'을 정의하여 각기 다른 경로의 콘텐츠를 한 화면에 조합 가능.
사용 상황 예시
- 대시보드 구성: 사용자 프로필, 통계 그래프, 실시간 알림 등 서로 성격이 다른 컴포넌트를 독립적인 페이지 단위로 관리할 때 매우 유용.
- 소셜 미디어 피드: 메인 타임라인을 보면서 동시에 측면에 추천 친구 목록이나 채팅창을 병렬로 렌더링할 때 사용.
- 조건부 렌더링: 특정 조건이나 권한에 따라 레이아웃의 특정 부분만 다른 페이지로 교체해야 하는 상황에 적합.
기본 문법 및 구조
- 슬롯(Slot) 생성: 폴더 이름 앞에
@기호를 붙여 정의(예:@analytics,@team). 이 폴더명은 URL 경로에는 포함되지 않는 논리적 구분선 역할. - 페이지 작성: 각 슬롯 폴더 내부에
page.js파일 생성. - 레이아웃 배치: 부모
layout.js에서 해당 슬롯들을 props로 받아 원하는 위치에 배치.
// app/layout.js
export default function Layout({ children, analytics, team }) {
return (
<div>
{children} {/* 기본 페이지 */}
<section>{analytics}</section> {/* @analytics 슬롯 */}
<section>{team}</section> {/* @team 슬롯 */}
</div>
)
}자주 하는 실수 및 주의사항
- 404 에러 발생: 브라우저 새로고침 시 Next.js는 각 슬롯의 현재 상태를 복구하려 시도함. 만약 특정 슬롯에 해당 경로에 맞는 페이지가 없다면 404 발생. 이를 방지하기 위해 반드시
default.js파일을 생성하여 초기 상태나 폴백(Fallback) UI를 제공해야 함.
- 슬롯 이름 불일치:
layout.js에서 받는 props 이름과@폴더명이 정확히 일치해야 함. 대소문자 구분 필수.
- 클라이언트 사이드 탐색 혼동: URL 이동 시 현재 활성화되지 않은 슬롯은 이전 상태를 유지한다는 점을 간과하여 UI 불일치 발생 가능성 존재.
핵심 요약
- @ 기호를 사용한 슬롯 폴더로 URL 경로 영향 없이 독립적 영역 정의.
- 부모 레이아웃에서 props 형태로 전달받아 복잡한 대시보드 UI 구현에 최적.
- 새로고침 시 발생할 수 있는 404 오류 방지를 위해 default.js 파일 작성 필수.
