React :: 동적 라우팅 (feat. DB 데이터 사용)

 

응용 프로그램에서 하던 "메뉴관리"의 개념을 웹에도 도입하는 것이 목적이었음.

사용자(관리자)는 프로그램 내에서 메뉴와 관련된 데이터를 DB에 insert 할 수 있고,

이렇게 만들어진 Data 로 라우팅에도 적용되고, 메뉴바에도 적용되는.. 그런 형태가 최종이었음.

 

React 생명주기 특성 상 어렵다는 답변을 받기만 하던 찰나..

정 안되면 이 라우팅 시스템을 정리하거나 쉽게 만들어보자는 마음으로 시작하게 되었다.

 

첫 아이디어

 

는 react-router-dom v5 문법으로 구현한 아래의 모습

2023.11.03 - [FRONTEND/React] - React :: (Next.js 사용 없이) 해당 폴더의 파일을 동적 라우팅.

 

아무래도 가장 최신 버전을 써야한다는 생각도 있었고, 외주업체에서 만들어준 로직을 변경없이 사용하려면 라우팅에 props 를 넘겨줄 수 있어야 했다. 위의 형태로는 원하는 props를 동적으로 넣어줄 수도 없고, 나중에 어떤 버전으로 인한 이슈가 터질 시에 해결할 수가 없는... 그런 상황이었음.

 

그냥 위의 코드는 REACT 생명주기로도 우리가 말하는 메뉴관리 형식의 동적 라우팅이 "가능"하다는 것을 입증하는 용도였을 뿐...

여기서 아쉬움을 느꼈던터라 머리 속에서 혼자 로직을 그려봤다.

 

고민

 

 

주석으로 덕지덕지해지는 나의 코드...

 

json(DB에서 받아온 데이터)에 있는 것들을

1. 동적으로 import 받아와서
2. map 돌려서 라우팅만 잘해주면 되지 않을까?

 

라는 개념을 적용하기 위해 고민을 해봤다.

 

나에게 장벽은 1. 동적으로 import 하는 것이었으며...

이것을 2. routing 하는 쪽에 </> 의 형태로 문법에 맞게 집어 넣는 것이었다...

 

사실상 거의 전부였다고 보면 됨. 문법이 힘들다 ...

 

그리고 문법 이슈 해결을 위해 stackoverflow 를 뒤지기 시작했고..

수많은 게시글 형태의 동적라우팅(포맷은 같고 데이터만 바뀌는..)을 알아서 걸러내며... 문법을 찾아내었다.

 

결과

 

그리하여 성공한 아래의 코드.

만약에 Route 에 props로 무언가를 더 넣어주고 싶다고 하면

DB에서 받아오는 json 파일에 추가하고 

 

return (<Route key={menuItem.id} path={menuItem.url} element={<Page />} />);

 

위의 부분에 props 를 지정해주면 된다.

 

 

 

예제 코드 첨부로 게시글을 끝내보도록 하겠다.

 

 

추후 개선점

 

json 파일을 받아와서 돌리는 것이다보니,

내가 지정한 변수 값이 undefined 일 때도 이 라우팅이 돌아서 routing을 찾을 수 없다는 에러가 찍혀놓고, 라우팅을 정확한 장소로 해주게 되는데.. 이것만 개선하면 충분히 복붙해서 써도 될만한 코드가 될 것 같다.

 

 

 

ㅎㅎㅎㅎ