[React] 라우터 구조의 설계에 대해서(react-router-dom v6)

웹을 만든다면 동적으로 URI를 만들어줘야하는 경우가 종종 생긴다.

React에서도 URI에 있는 특정 params나 id를 읽어와서 그에 맞는 적절한 컴포넌트를 보여주는게 가능하다!

 

/workspace/sleact/channel/일반

/workspace/sleact/dm/2

 

라우터 구조 설계로 같은 레이아웃에 보내고,

그 레이아웃 안에서 다른 컴포넌트를 보여주는 건 생각지도 못한 방법이었는데 되게 효율적인 것 같아서 공유해볼까 한다.

 

1. 라우터 설계

 

먼저, 라우터 구조를 설계해야한다.

react-router-dom이 작년 11월에 v6가 되었는데 아직도 블로그나 강의 자료들이 v5기준으로 되어있는 곳들이 많다.

 

React Router | Tutorial

아무리봐도 그냥 공식문서가 너무 잘되어있다.

 

v5에서는 모든 라우터들이 같은 depth에서 묶였지만, 이제 라우터를 계층적으로 관리할 수가 있어졌다!

이번 클론코딩에서 슬랙의 레이아웃 구조를 만들때는 이런 식으로 구성했다.

 

 

그러니 일단 어디든지 Workspace라는 layout으로 보내기만 하면 되지만..

router에서 어떤 params를 넘겨줄 건지를 정해줘야하는 일이 생겼다.

 

<Route path={"/workspace"} element={<Workspace />}>
    <Route path={":workspace/channel/:channel"} element={<Workspace/>} />
    <Route path={":workspace/dm/:id"} element={<Workspace/>} />
</Route>

 

workspace 라우터 안에 params로 써야하는 곳에는 ":"기호를 붙혀주고,

static string이 되어야 하는 곳에는 그냥 적어주면 되겠다.

 

2. Workspace에서 params 받기.

 

예전에 했을 때는 그냥 component의 props에 암시적으로 params가 있어서 받아서 조정해도 되었지만,

React에서 별로 권하는 방법은 아닌 것 같다. (마찬가지로 children도 암시적으로 받을 수 있던 때가 있었다.)

 

지금은 useParams를 써주는 걸 권장한다!

 

const { workspace, id } = useParams<{ workspace: string, id: string }>();

 

이렇게 해두면 아까 ":" 표시해뒀던 곳에 적혀있는 url을 받아서 사용할 수 있다.

(물론, 이 컴포넌트까지 넘겨주는 건 다른 컴포넌트에서 해줘야한다.)

 

그리고 오늘 가장 공유하고 싶었던 App.tsx가 아닌 다른 컴포넌트 안에서 Router 설정이다.

 

3. 하위 컴포넌트 라우팅

<Routes>
	<Route path={":workspace/channel/:channel"} element={<Channel />} />
	<Route path={":workspace/dm/:id"} element={<DirectMessage />} />
</Routes>

 

App.tsx가 아니더라도,

일반 컴포넌트에서 하위 라우터를 설정해 줄 수 있다.

 

위의 Slack구조는 지금 url이 channel인지, dm인지에 따라 우측에 보여주는 컴포넌트를 다르게 해준다.

왼쪽이나 상단 검색바는 같은 컴포넌트로 구성되어있기 때문에 다른 레이아웃에서 같은 컴포넌트를 호출할 필요가 없다,

 

채널과 dm 모두 Workspace라는 layout으로 보내고,

그 layout안에서 우측에 해당하는 부분만 이 코드처럼 Route로 연결해준다면 간단하게 해결 가능하다.