1. react-router-dom의 Outlet 기능 활용하여 페이지 분리 구현하기

버킷 리스트를 생성하는 개발 시 다음과 같이 퍼널 페이지를 구현하기 위해 react-router-dom의 Outlet을 적용하였습니다.

카테고리 선택

카테고리 선택

꿈 내용 작성

꿈 내용 작성

추가 정보 작성

추가 정보 작성

외부의 레이아웃을 유지하고 해당 변경되는 url에 따라 내용 컨텐츠만 바꿔주는 방식으로 버킷 리스트 생성 페이지를 각각의 상세 페이지로 분리하여 개발을 진행하였습니다.

:: 코드 살펴보기

1. router.tsx

다음과 같이 router.tsx 파일에서 특정 URL에 대해 매칭되는 컴포넌트를 명시해줬습니다.

	{
		path: '/bucket/write',
		element: <AddBucket />,
		label: '버킷작성',
		children: [
			{
				path: '',
				element: <CategoryInfo />,
				label: '카테고리',
			},
			{
				path: 'category',
				element: <CategoryInfo />,
				label: '카테고리',
			},
			{ path: 'main', element: <MainInfo />, label: '꿈내용' },
			// { path: 'place', element: <PlaceInfo />, label: '장소' },
			{ path: 'additional', element: <AdditionalInfo />, label: '추가정보' },
		],
	},

2. MultiPageLayout.tsx

MultiPageLayout.tsx에서는 생성 페이지 내에서 사용되는 공통 레이아웃을 정의해주고 있습니다.

import { Outlet } from 'react-router-dom'
import NavigationHeader from '../../NavigationHeader'
import { MultiPageHeaderInfo } from '../../../types/router'

interface MultiPageLayoutProps {
	headerData: MultiPageHeaderInfo[]
	hasIcon: boolean
}

const MultiPageLayout = ({ headerData, hasIcon }: MultiPageLayoutProps) => {
	return (
		<div className={`flex flex-col grow ${hasIcon && 'pt-[10px]'}`}>
			<NavigationHeader headerData={headerData} hasIcon={hasIcon} />
			**<Outlet />**
		</div>
	)
}

export default MultiPageLayout

3. NavitaionHeader.tsx