[React] 리액트 라우터로 중첩 라우팅하기 (경로 안에 경로 넣기)

중첩 라우팅이란?

중첩 라우팅(Nested Routing)이란 라우팅 구조를 계층적으로 구성하는 방법으로 부모 컴포넌트의 경로에 딸린 자식 컴포넌트들의 경로를 정의하는 것을 의미한다. 쉽게 말하면 abc.com/users가 일반 라우팅이고, abc.com/users/name/shawn이 중첩 라우팅이다. 즉, 부모 컴포넌트의 경로 뒤에서 자식 컴포넌트의 경로가 추가되는 것이다.

 

사용 예시

// App.js
const App = () => {
    return (
        <Routes>
            <Route path="/home" element={<Home />}>
                <Route path="users" element={<Users />} />
            </Route>
        <Routes />
    )
}

// Home.js
const Home = () => {
    return (
        <div>
            <h1>이곳은 홈입니다.</h1>
        </div>
        <Outlet /> // Users 컴포넌트가 들어갈 자리
    )
}

라우트 안에 또 라우트를 넣어서 중첩 라우팅을 구현할 수 있다. 위의 코드는 "/home" 안에 "users"를 넣어서 "/home/users"가 되도록 하였다. 이렇게 되면 Home 컴포넌트 위에 Users 컴포넌트가 올려진다고 생각하면 된다.

즉, 중첩 라우팅은 기존(부모) 경로 페이지의 데이터 혹은 레이아웃은 유지한 채 무언가를 추가하고 싶을 때 사용한다.

 

// App.js
const App = () => {
    return (
        <Routes>
            <Route path="/" element={<Nav />}>
                <Route path="/home" element={<Home />} />
                <Route path="/View" element={<View />} />
            </Route>
        </Routes>
    )
}

// Nav.js
const Nav = () => {
    return (
        <nav>
            ...
        </nav>
        <Outlet />
    )
}

모든 페이지에 적용되는 공통적인 레이아웃이 있다고 할 때에도 중첩 라우팅을 이용할 수 있다.

위 코드에서는 Nav 컴포넌트가 페이지마다 공통적으로 들어갈 레이아웃이다. path에는 "/"을 줘서 모든 페이지에 Nav 컴포넌트가 들어가게끔 해주었다. 따라서 "/home"과 "/view"에 들어가도 "/" Nav 컴포넌트를 볼 수 있다.

 

Nav 컴포넌트 안으로 들어가는 Home과 View 컴포넌트는 그럼 어디에 위치하게 되는 걸까?

중첩 라우팅을 사용하게 되면 부모 컴포넌트에 자식 컴포넌트가 위치할 자리도 만들어줘야 한다. 그게 바로 Outlet이다.

Outlet은 중첩 라우팅을 사용하는 부모 경로 컴포넌트에 위치하며 Outlet 자리에 자식 경로 컴포넌트가 들어간다.

 

중첩 라우팅을 잘못 이해하면 그냥 컴포넌트 안에 컴포넌트 넣는 것(컴포넌트 중첩)과 뭐가 다를까 싶을 수도 있겠지만, 중첩 라우팅은 경로에 따라서 여러 개의 컴포넌트를 포함한 뷰를 효과적으로 관리할 수 있고 중복되는 코드도 줄일 수 있는 등의 여러 가지 방면에서 많은 이점을 우리에게 제공해 준다. 개발하는 웹의 규모와 구성에 따라서 중첩 라우팅을 적절히 사용하면 좋을 것 같다.

 

1. abc.com/users/name/shawn 같은 게 중첩 라우팅을 이용한 예시
2. <Route> 안에 <Route />를 넣어준다.
3. 컴포넌트 안에 컴포넌트를 넣는 것처럼 내 앞에 있는 경로의 컴포넌트 안에 자식 컴포넌트를 넣을 수 있음.
4. Outlet은 부모 컴포넌트에서 자식 컴포넌트가 위치할 자리를 잡아두는 것.