[React-Router] TIL: react v6 서브라우터(중첩라우터)

서브라우터(중첩라우터)

라우터 속의 라우터를 말합니다. 성능과 관련이 있습니다. 변하는 부분만 랜더링을 다르게 걸어주면 굳이 전체를 랜더링하지 않아도 되기 때문입니다.

방법

React에서는 보통 랜더링하는 부분을 모아서 App.tsx 에 설정해둡니다. 서브라우터는 각 컴포넌트를 구성하는 파일에 위치합니다.

├ App.tsx

      <BrowserRouter>
        <Routes>
        	<Route path='/' element={<Home/>}/>
         	<Route path='/list' element={<List/>}/>
         	<Router path='/detail' element={<Detail/>}/>
        </Routes>
      </BrowserRouter>

Route는 한 개의Routes로 감싸있어야합니다.

서브라우터가 필요한 때

예를 들어 Detail 페이지에서 어떤 버튼을 클릭하면 디테일 페이지 아래로 더 자세한 정보를 보여주는 컴포넌트가 보여진다고 가정해봅시다. 서브라우트를 사용하지 않고 Detail + 컴포넌트 레이아웃을 가진 페이지(MoreDetail)를 추가해주는 방법은 아래와 같습니다.

├ App.tsx

      <BrowserRouter>
        <Routes>
        	<Route path='/' element={<Home/>}/>
         	<Route path='/list' element={<List/>}/>
         	<Router path='/detail' element={<Detail/>}/>
            <Router path='/detail/morDetail' element={<MoreDetail/>}
        </Routes>
      </BrowserRouter>

이렇게 되면 넘어갈때마다 새롭게 컴포넌트들이 랜더링될 것입니다. 더 좋은 방법으로 서브 랜더링을 사용할 수 있습니다.

How to?

├ App.tsx

      <BrowserRouter>
        <Routes>
        	<Route path='/' element={<Home/>}/>
         	<Route path='/list' element={<List/>}/>
         	<Route path='/detail/*' element={<Detail/>}/>
        </Routes>
      </BrowserRouter>

App.tsx는 이렇게 설정합니다.
/detail/*에서 * 는 와일드카드입니다. detail 뒤에 뭐가 붙든간에 Detail 컴포넌트가 보이라고 말해주는 것입니다.

그리고 서브라우터가 필요한 부분에서 라우터를 설정해줍니다.

Detail.tsx

export defalt function Detail(){
	const navigate = useNavigate();

	return(
    //기존 디테일 컴포넌트들...
    <button onClick={()=>{navigate('moredetail')}}> 상세정보 보기 </button>
    
    
    <Routes>
        <Route path='moredetail' element={<추가되는 컴포넌트 />}>
    </Routes>
    
    )

}

버튼을 누르면, path는 'detail/moredetail'로, 그리고 추가되는 컴포넌트가 보이게 됩니다.

추가: 와일드카드의 단점

만일 처음 App.tsx 설정이 아래와 같았다고 가정해봅시다.

├ App.tsx

      <BrowserRouter>
        <Routes>
        	<Route path='/' element={<Home/>}/>
         	<Route path='/list' element={<List/>}/>
         	<Route path='/detail/:itemId' element={<Detail/>}/>
        </Routes>
      </BrowserRouter>

paramitemId을 이용하여 서버에게 요청하고 있었다면, 아래와 같이 와일드카드를 설정하면 인식하지 못할 수도 있습니다.

├ App.tsx

    ...
         	<Route path='/detail/*' element={<Detail/>}/>
        </Routes>
      </BrowserRouter>

param이 없기에 인식하지 못합니다.