Route 정보 관리 및 페이지 정보 커스텀훅에 대해

[chasj0326]

react-router-dom 을 사용하여 페이지 라우팅을 처리하긴 하지만, 라우트 관련 로직들을 일관적이고 쉽게 처리하기 위해서 아래와 같은 코드들이 있으면 어떨까 합니다!

Routes 정보를 관리하는 레이어 필요

• route 에 따라 달라지는 로직이나 UI 가 있다면, 이 내용을 한 곳에 저장하기 위함입니다.

  • route 에 따라 달라지는 것들 : 헤더에 들어갈 페이지 이름, 페이지 컴포넌트, Navbar 컴포넌트의 유무 ...

• 따라서 이 데이터를 객체로 관리하고, createBrowserRouter 메소드의 인수로 객체를 순환한 값을 넣어주면 어떨까요?

• route 관련 정보가 수정되거나 추가될 때, 해당 파일만 수정하면 되기 때문에 유지보수가 편리해진다고 생각해요!

• 모든 데이터가 하나의 파일 내에서 관리되기 때문에, 다른 코드들에서 이를 상수처럼 참조하면 차후에 일어날 휴먼 에러들을 방지할 수 있어요.

// routeMap.ts (example, 임시입니다!)
{
  somepage : { 
    path: '/page/:id', 
    element: <Page />, 
    title: '페이지 제목', 
    authRequired: true, 
    navBarRequired: false,
    navPath: (id: string) => `/page/${id}`
  }
  // ...
}

현재 route (url) 정보 관찰자 필요

• 현재 페이지 url 을 바탕으로 가져와야 하는 데이터들은 산재되어 있어요 (페이지 제목, 파라미터, 쿼리스트링 ...)

• 따라서 현재 페이지의 url 을 참조하여 데이터들을 반환하는 커스텀 훅이 있으면 좋을 것 같습니다!

  • 페이지 컴포넌트 내에서는 이 커스텀 훅을 호출하여 필요한 데이터들을 각 컴포넌트에게 prop 으로 뿌려주는 형태에요

• 예를 들어, 호출하면 이런 값들을 반환하는 형태입니다
  현재 url 이 /data/18?value=123&keyword=123 라면,

[bbearcookie]

오오!! 좋아요! 👍 👍 👍
한 가지 궁금한 부분이 title 필드는 헤더에 들어가는 타이틀인가요!?
방 상세 페이지처럼 동적인 값이 들어가야 하는 경우도 있을 것 같아서요!

[chasj0326]

그렇네요! 임시로 넣어놓긴 했는데 모아밤에서는 없어도 될거같은 필드입니다 ! 워낙 유동적이라서..!
거의 모든 페이지의 헤더 타이틀이 동적이거나 없거나 둘 중 하나네요.. !