[React] React라우팅 Link, Routes를 이용하여 화면메뉴 동적으로 세팅하기

라우팅이란?

웹 어플리케이션에서 사용자가 URL을 통해 페이지에 접근할 때 해당 URL에 따라 서로 다른 컴포넌트를 보여주는 것을 의미합니다.
 
React에서는 메뉴를 클릭했을 때 다른 화면으로 이동하는 수단으로 많이 사용 합니다.
 
React에서 기본적으로 화면들어가는 구조를 파악해보면 
index.js에서 > App.js를 호출하는 방식을 가지고 있습니다.
우선 저희는 App.js에서 작성을 해보도록 하겠습니다.

1. react-router-dom설치

npm install react-router-dom

React에서는 라우터를 구현할 때 react-router-dom을 사용합니다.
 

2. index.js에 ReactDom 생성 및 BrowserRouter  생성

import React from 'react';

import ReactDOM from 'react-dom/client';

import './css/index.css';

import App from './App';

import {BrowserRouter}from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

    <BrowserRouter>

        <App />

    </BrowserRouter>

);

App.js를 감싸고 있는 index.js에 저희는 ReactDom 생성 및 BrowserRouter 컴포넌트를 생성합니다.
BrowserRouter컴포넌트는 한 번만 생성하면 되기때문에 가독성을 위해 index.js에서 <App />컴포넌트를 감싸서 생성해주었습니다.

3.App.js에 react-router-dom import하기

import React from 'react';
import { Route, Routes, Link } from 'react-router-dom';

function App() {
  return(
      <div className="App">
          
      </div>
  );
 };
 
 export default App;

이제는 작업하는 화면에서 react-router-dom에 있는 모듈 중 내가 사용하고자 하는 모듈만 import를 할 수 있습니다.
저희는 react-router-dom중 Route와 Routes, Link를 사용하기위해 
import { Route, Routes, Link } from 'react-router-dom'; 를 선언해두었습니다.

4. Link, Route, Routes

<Link to="[ 클릭했을 때 이동되는 url ]">
<Route path="[ 클릭했을 때 이동되는 url  ]" element={실제 사용될 화면} >

 Link에서 to에 들어가는 경로와  Route에서 path에 들어가는 경로가 서로 짝이 되며
 Link에서 to로 들어온 url과 맺어진 Route를 찾아서 element를 보여주게 되는겁니다.
*Routes는 React v5에서 사용되던 Switch가 Routes 로 변경되어 새로 적용되었습니다.

import React from 'react';
import { Route, Routes, Link } from 'react-router-dom';
import AA from './page/AA.js';
import BB from './page/BBjs';

function App() {
  return(
      <div className="App">
          <ul className="menu">
            <li><Link to='/A'>메뉴AA</Link></li>
            <li><Link to='/B'>메뉴BB</Link></li>
          </ul>

          <Routes>
            <Route path='/A' element={<AA />} />
            <Route path='/B' element={<BB />} />
          </Routes>
      </div>
  );
};

export default App;

이제는 화면에 <ul> <li> 태그 속에 Link 컴포넌트를 사용하여 AA라는 화면과 BB라는 화면을 불러오도록 하겠습니다.
url /A로 접속했을경우 AA.js 화면을 보여주게되며, /B로 접속했을경우 BB.js 화면을 보여주게 됩니다.
*리액트에서는 Link태그를 사용하지만 랜더링 되었을때는 저 Link가 a태그가 되어 랜더링 됩니다.

5. Link, Route 동적생성하기

매번 화면정보를 Link에 담아두고 Routes에 적어두다보면 화면이 100개 200개 넘어갈 경우 
Routes에 들어갈 Route들을 일일이 적어주는 번거로움이 발생할 수 있습니다.
그래서 저희는 node.js의 require을 통해 프로젝트 폴더에 접근하여 해당하는 폴더의 하위에 있는 모든 파일들을 동적으로 ul의 li에 만들어보도록 해보겠습니다.
 
1) 우선 내가 메뉴로 등록할 폴더밑의 파일들의 메뉴 정보들을 가져오는 함수를 하나 생성합니다. (comm.getFiles)

comm.getFiles =(r) =>{

    let files = {};

    r.keys().map((item, index) => {

        files[item.replace("./", "")] = r(item);

    });

    let menuMap = files;

    let menuList = [];

    let menuKeyArray = Object.keys(menuMap);

    menuKeyArray.forEach(_id => {

        if(new RegExp(".*\.js$", "gi").test(_id)){

            delete menuMap[_id];

        }else{

            menuList.push({id:_id,obj:menuMap[_id],title:_id.replace(/Page/g,'메뉴')});

        }

    });

    return {map:menuMap, list:menuList};

};

 
2)  comm.getFiles을 통해 얻어온 메뉴 정보를 menuInfo에 담아두고
     App.js에서는 GenerateMenu라는 함수를 하나 생성해서 return 값으로는 menuInfo정보를
    아래 노란 태그와 같은 태그를 동적으로 만들어 봅니다.

 
*이 때 주의할점은 App.js가 로드시 GeneraterMenu 함수도 자동으로 실행됩니다.
그렇기 때문에 Route도 같이 생성되는데 이 때 element 속성값에 넣는 element.obj.default (화면 모듈)을
element.obj.default()로 수행하니 화면이 깨지는 이슈가 발생하였고, element.obj.default를 수행하지 않고
중괄호 속에 <>로 한번 더 감싼다음 {<element.obj.default>} 라고만 선언해두어야 
화면을 클릭할 때 각 해당되는 화면이 랜더링이 되었습니다.

import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
function GeneraterMenu(props){
  let _html = [];
  let _route = [];
  props.list.forEach(element => {
      _html.push(
        <li id={element.id} key={element.id}><Link to={element.id}>{element.title}</Link></li>
      );
      _route.push(
          <Route path={element.id} key={element.id} element={<element.obj.default />} />
      )
  });
  return <><ul className="menu">{_html}</ul><Routes>{_route}</Routes></>
}

function App() {
  let menuInfo = comm.getFiles(require.context("./page"));
  return(
      <div className="App">
        <GeneraterMenu list={menuInfo.list}></GeneraterMenu>  
      </div>
  );

}
export default App;

그러면 화면상에서는 ./page  page라는 폴더 하위에 있는 화면들을 menuInfo에 담고
menuInfo에 있는 각 메뉴들을 아래 사진과 같이 <ul> <li>태그가 동적으로 생성되며
각 메뉴를 클릭했을 경우 Route와 연결된 화면이 띄워집니다.