중첩 라우팅 - Route, outlet

이전 프로젝트을 리팩토링하다보니깐 몇몇의 페이지에서 똑같은 디자인을 가진 <main> 태그를 사용하고 있었다.
똑같은 디자인을 가진 <main> 태그를 컴포넌트화하여 재사용하고 하고싶어서 찾아보다가 중첩 라우팅이라는 걸 알게 되었다.

중첩 라우팅이란?

활성화된 페이지 컴포넌트 내에서 Route를 중첩하여 상위 Route와 하위 Route를 "동시에 활성화" 시켜주는 것이다.

1.똑같은 디자인을 가진 <main> 태그 컴포넌트 생성

import styled from 'styled-components';

export default function Signup() {
  return (
    <ContainerMain>
    </ContainerMain>
  );
}

const ContainerMain = styled.main`
 	width: 1056px;
    display: flex;
    justify-content: center;
    padding: 0 16px;
`;

2. Route 중첩

원래 나의 코드

 <Route path="/signup" element={isLogin ? <Navigate to="/" /> : <Signup />} />
 <Route
   path="/signup/oauth"
   element={isLogin ? <Navigate to="/" /> : <SignupOauth />}
 />
 <Route
   path="/signup/complete"
   element={isLogin ? <Navigate to="/" /> : <SignupComplete />}
  />

📌 중첩 라우팅한 코드
💡 상위 Route의 path 속성 값을 기준 경로로 갖는 상대 경로를 작성

 <Route path="/signup" element={<Main />}> // element에 재사용하고 싶은 컴포넌트 삽입
    <Route path="" element={isLogin ? <Navigate to="/" /> : <Signup />} />
    <Route
      path="oauth"
      element={isLogin ? <Navigate to="/" /> : <SignupOauth />}
     />
     <Route
       path="complete"
       element={isLogin ? <Navigate to="/" /> : <SignupComplete />}
     />
 </Route>

3. Outlet 설정

💡 부모 컴포넌트 내에서 자식 컴포넌트가 렌더링될 위치에 Outlet 컴포넌트를 작성하면 해당 위치에 하위 페이지 컴포넌트가 렌더링

import { Outlet } from 'react-router-dom';
import styled from 'styled-components';

export default function Main() {
  return (
    <ContainerMain>
      <Outlet />
    </ContainerMain>
  );
}

const ContainerMain = styled.main`
 	width: 1056px;
    display: flex;
    justify-content: center;
    padding: 0 16px;
`;

참고
https://velog.io/@kim98111/Routing#%EC%BF%BC%EB%A6%AC-%ED%8C%8C%EB%9D%BC%EB%AF%B8%ED%84%B0-%EC%B6%94%EC%B6%9C
https://junvelee.tistory.com/36