20220902

• Mypage 탑메뉴 구성중 페이지 이동에 대한 고민

export const menus = [
  {
    id: 0,
    text: "알람 설정",
    link: "/alram",
  },
  {
    id: 1,
    text: "뉴스 보기",
    link: "/news",
  },
];

• state로 관리
  • 탑메뉴의 메뉴를 클릭할때 state를 id 값으로 set하고 변경된 state값에 따라 화면을 다르게 보여줌

• router link로 관리

  • 탑메뉴의 메뉴를 클릭하면 link로 페이지를 이동시킴
• link 로 보여주기로 결정

<Route path="/mypage" element={<MyPage />}>
  <Route path="/mypage/alram" element={<Alram />} />
  <Route path="/mypage/news" element={<News />} />
</Route>

내부에 보여줄 컴포넌트를 넣고

<Header menuId={menuId} setMenuId={setMenuId} />
<MainStyle>
  <Outlet />
</MainStyle>

<Outlet/> 으로 보여줄 위치 지정

• route Redirect, 중첩라우팅 찾아보기