페이지 안에 페이지 안에 페이지 ... : 중첩라우팅

 

🌈 라우팅을 왜 할까?

 

 - 기존의 웹사이트 방식
전통적인 방식: 웹사이트에 접속하면, 서버에서 HTML, CSS, JavaScript 파일 등을 받아오고, 이를 브라우저가 해석해 화면에 보여준다.
새 페이지 이동: 사용자가 새로운 페이지로 이동하려면, 다시 서버에 요청을 보내고 전체 페이지를 새로 불러온다.

 

- 라우팅을 하면?
한 번의 로딩: 처음 웹사이트를 방문할 때 필요한 파일들을 모두 불러온다. 그 후로는 새로운 페이지를 불러올 때 서버에 다시 요청하지 않아도 됨.
링크 클릭시: 사용자가 링크를 클릭하면, 전체 페이지를 새로 불러오는 대신 필요한 부분만 업데이트함. 이렇게 하면 페이지 이동이 훨씬 빨라진다.

 

☀️ 중첩 라우팅

중첩 라우팅은 특정 구조의 페이지 내에서 더 작은 단위의 페이지 또는 구성 요소를 표시하는 방법을 말한다.

상자 안에 더 작은 상자들이 들어 있는 것과 같은 개념.

 

🏠 집을 예로 들어 보면

• 집: 웹사이트 전체
• 방: 페이지들 (예: 홈, 소개 페이지 등)
• 가구: 페이지 내의 더 작은 구성 요소들 (예: 텍스트 박스, 이미지 등)

내 방의 책상에서 침대로 이동한다고 해보자.

이동할 때 방을 나갔다가 다시 들어와서 침대로 가는게 효율적일까?

책상에서 침대로 바로 이동하는게 효율적일까? 

당연히 후자가 효율 적일 것. 

즉 중첩 라우팅을 통해 부모 페이지를 재랜더링 하지 않고 자식 페이지만 랜더링 할 수 있음.

 

인별그램도 보면 죄측 사이드 바는 고정컴포넌트로 다른 탭으로 넘어가도 동일하다. 이 때 중첩 라우터를 사용할 수 있다.

 

 

⭐️ 중첩 라우팅 사용하기

1) <Outlet> 사용하기

    - 공통으로 사용할 컴포넌트의 Route (/workspace,부모컴포)로 자식 컴포를 감싸준다.

    - 자식컴포는 부모 컴포의 Route path를 이어서(/workspace/channel 이나 /workspace/dm 같이) 작성해야한다.

     (그래야 렌더링 됨)

    - 부모 컴포에서 자식컴포가 사용될 영역을 <Outlet>태그로 표시해주면 된다.

//App.tsx
import React from 'react';
import {Routes,Route} from 'react-router-dom';
import loadable from '@loadable/component';

const Workspace = loadable(()=> import('@layouts/Workspace'))
const Channel = loadable(()=>import('@pages/Channel'))
const DirectMessage = loadable(()=>import('@pages/DirectMessage'))

const App = () => {
  return (
    <div>
    <Routes>
        <Route path ='/workspace' element ={<Workspace/>}>
          <Route path="/workspace/channel" element={<Channel></Channel>}></Route>
          <Route path="/workspace/dm" element={<DirectMessage></DirectMessage>}></Route>
        </Route>
    </Routes>
    </div>
  )
}


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

const Workspace = () => {
  return (
    <div>   
          <Outlet></Outlet>
    </div>
  )
}

 

2)<Outlet> 사용 안하기

- 부모컴포의 Route path 끝에 * (아스타리카)를 붙여준다. 이 의미는 /workspace 뒤에 어떤 url이 더 붙는다는 뜻.

- 부모 컴포에서 자식컴포가 표현될 곳에 Routes 와 Route로 라우팅해준다. 이때 path는 부모 route path를 뺸다.

//App.tsx
import React from 'react';
import {Routes,Route} from 'react-router-dom';
import loadable from '@loadable/component';

const Workspace = loadable(()=> import('@layouts/Workspace'))


const App = () => {
  return (
    <div>
    <Routes>
    	<Route path ='/workspace/*' element ={<Workspace/>}></Route>
    </Routes>
    </div>
  )
}


//Workspace.tsx
import { Outlet} from 'react-router'
import loadable from '@loadable/component';

const Channel = loadable(()=>import('@pages/Channel'))
const DirectMessage = loadable(()=>import('@pages/DirectMessage'))

const Workspace = () => {
  return (
    <div>   
    <Routes>
        <Route path="/channel" element={<Channel></Channel>}></Route>
        <Route path="/dm" element={<DirectMessage></DirectMessage>}></Route>
    </Routes>
    </div>
  )
}