route 리스트화하여 사용하기

Before

그동안 비슷한 작업들을 할 때 menu컴포넌트에서만 map을 사용하며 메뉴를 클릭하면 연결될 route를 각각 써 주었었다.

// Router.tsx
<Route element={<Sidebar />}>
	<Route path="/" element={<Home />} />
	<Route path={"A"} element={<PageA />} />
	<Route path={"B"} element={<PageB />} />
    <Route path={"C"} element={<PageC />} />
    {// 페이지가 늘어나면 계속추가...}
</Route>

// Sidebar.tsx
const MENU = [
  { id: 0, title: "Page A", path: "/A" },
  { id: 1, title: "Page B", path: "/B" },
  { id: 2, title: "Page C", path: "/C" },
]

<SidebarMenu>
{MENU.map((menu) => {
	return (
		<Menu key={menu.id} onClick={() => navigate(menu.path)}>
			{menu.title}
		</Menu>
	);
})}
</SidebarMenu>

그렇다보니 페이지가 추가되어야 한다면 menu,route 각각 수정을 했어야 했는데 route를 리스트화 해주면 메뉴관련 수정사항이 생겼을 때 해당 리스트만 수정하면 되니 유지보수에 좋을 것 같아서 해보았다.

After

// Menu.ts
import PageA from "../pages/PageA";
import PageB from "../pages/PageB";
import PageC from "../pages/PageC";

export const PAGE_LIST = [
  { id: 0, title: "Page A", path: "/A", component: PageA },
  { id: 1, title: "Page B", path: "/B", component: PageB },
  { id: 2, title: "Page C", path: "/C", component: PageC },
];

우선은 PAGE_LIST로 메뉴이름, route경로, 사용할 페이지컴포넌트를 작성하였고
이것을 Router.tsx와 Sidebar.tsx에서 사용해주었다.

// Router.tsx
<Route element={<Sidebar />}>
	<Route path="/" element={<Home />} />
	{PAGE_LIST.map(({ path, component: Component }) => {
		return <Route path={path} element={<Component />} />
	})}
</Route>

// Sidebar.tsx
<SidebarMenu>
{PAGE_LIST.map((menu) => {
	return (
		<Menu key={menu.id} onClick={() => navigate(menu.path)}>
			{menu.title}
		</Menu>
	);
})}
</SidebarMenu>

메뉴에 수정사항이있다면 Menu.ts에서 추가/수정/삭제만 해주면 되도록 코드를 정리해보았다 :)

---

++
하지만 위처럼 사용했을 시 페이지가 많아지게되면 PAGE_LIST에 쓰이는 컴포넌트들을 초기 로드에 포함하기 때문에 추가 개선이 필요할 것 같아서 찾아보았다. 이후에 적용해봐야지!
reference

---

공부하며 정리&기록하는 ._. 씅로그