[우이삭] 사이드 바 라우팅 처리

구현 내용

지도의 사이드바에서 특정 동작이 일어나면 다음의 주소로 이동이 필요하다.

• /diary/:spotId : 특정 장소 선택시 url
• /diary/:spotId/:diaryId : 특정 다이어리 선택시 url

기존 코드

현재 Diary 는 다음과 같은 코드로 이뤄져있다.

<div>
	<DiaryMainSideBar /> <- SideBar 의 한 종류가 정적으로 들어가있는 상태
	<Map />
</div>

SideBar 컴포넌트가 해당하는 위치에 url 에 따라 다른 레이아웃의 사이드바를 보여주고 싶었다.

구현 방법

url 에 따라 이동하는 페이지도 큰 컴포넌트라고 생각했기에, Diary 페이지의 사이드바 또한 라우팅으로 처리할 수 있겠다는 생각을 했다.

react-router 의 Outlet 과 동적 라우팅을 이용하여 구현하였다.

경로 상수 추가

// paths.ts

const {
	// ...
	DIARY: {
		ROOT: '/diary',
		SPOT: '/diary/:spotId',
		DIARY_DETAIL: '/diary/:spotId/:diaryId'
	}
}

createRouter 에 SideBar 컴포넌트 추가

// router.tsx

{
  path: PATHS.DIARY.ROOT,
  element: <Diary />,
  children: [
    {
      index: true, // Root 경로가 보여주는 기본 요소
      element: <DiaryMain />,
    },
    {
      path: PATHS.DIARY.SPOT, // diary/:spotId 로 이동
      element: <DiarySpot />,
    },
    {
      path: PATHS.DIARY.DIARY_DETAIL, // diary/:spotId/:diaryId 로 이동
      element: <DiaryContent />,
    },
  ],
},

Diary 내부에서 Outlet 처리하기

react-router 의 Outlet 은 는 마치 react 의 chilren 처럼 외부에서 전달한 컴포넌트를 가져와서 사용할 수 있도록 해준다.

// diary.tsx
import { Outlet } from 'react-router';

<div>
	<SideBar>
		<Outlet />
	</SideBar>
	<Map />
</div>