리액트 라우트 개선 과정

 

 

인턴십 당시에는 우리가 일부 페이지만 담당했기 때문 라우터와 연결할 페이지 수가 아주 적었다. 그래서 원래 하던 것처럼 해도 크게 불편한 점이 없었다.  그러다가 어느날 불현듯 찾아온 깨달음이 있었는데, 바로 메뉴와 하위 메뉴의 수를 합치면 어마어마하게 많다는 것이었다..개발이 진행될수록 페이지 컴포넌트도 늘어날텐데 그때마다 하나하나 추가하면 라우트 코드만 몇백줄이 되는건가? 다른 웹사이트도 그런지, 어떻게 관리해야하는 건지 궁금해져서 서치에 들어갔다.

 

그러다가 찾은 글이 바로 아래의 링크이다. 

 

참고 

https://tech.kakao.com/2022/07/13/active-routing-for-e-certificate/

전자증명서 리액트 페이지 및 레이어 동적 라우팅

 

Next.js까지 사용해보진 못했지만 고민의 70%는 해결할 수 있었다.

Next.js는 pages 폴더 하위 경로와 URL을 매칭시켜 URL 정보로 pages 폴더 하위 컴포넌트가 로드되도록 라우팅 처리를 별도의 코드 구성없이 지원한다고 한다.

 

그런데 우리는 Next.js를 도입하기엔 시간이 부족했기 때문에 백엔드의 Menu 모델을 수정해보자는 쪽으로 이야기가 흘러갔다. 실제로 path와 페이지 컴포넌트명을 데이터로 갖고있는 Url 테이블을 생성한 뒤 api를 호출하는 식으로 수정하기도 했다.

하지만 페이지 컴포넌트를 추가할때마다 데이터를 추가해 주는 것보다 프론트에서 하드코딩 된 페이지 리스트를 갖고 있는 것이 낫다고 판단되어 이 부분은 그렇게 마무리했다.