[React] 리액트 라우터 사용하기(React-Router-Dom)

리액트에서의 페이지 이동을 위한 라우터(Router)

 

기존에는 SPA(Single Page Application) 방식을 이용해서 새로운 페이지를 로드하는 방식이 아닌,

하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가져오는데

라우트를 활용해 신규 페이지를 불러오지 않은 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링을 해줄 수 있다.

---

라우팅이란?

: 사용자가 요청한 URL에 따라서 해당 URL에 맞는 페이지를 보여주는 것으로 하나의 페이지 내에서 url에 따라 렌더링 진행

 

리액트 라우터(React Router)란?

: 사용자가 입력한 주소를 감지하는 역할

: 여러 환경에서 동작할 수 있도록 동작할 수 있도록 라우터 컴포넌트 제공

: BrowserRouter / HashRouter 2가지가 존재

 

1) BrowserRouter

: HTML5의 history API를 활용해 UI 업데이트

: 동적인 페이지에 적합

 

2) HashRouter

: URL의 hash를 활용한 라우터

: 정적인 페이지에 적합

 

HashRouter는 잘 사용하지 않아 BrowserRouter를 중점으로 블로깅 할 예정이다.

---

React Router 설치하기

npm install --save react-router-dom

---

Router 활용하기

 

1. <BrowserRouter> 태그로 컴포넌트 사용

: BrowserRouter를 사용할 것이기 때문에 Router를 사용할 컴포넌트를 <BrowserRouter>로 컴포넌트를 감싸주어야 함

 

* 주로 App.js를 기본으로 사용하기 때문에 index.js에서 <App/>을 감싸는 태그를 변경하면 됨

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

// Router와 관련없는 import는 나타내지 않았으므로 사용자에 따라 알맞게 사용할 것

 

2. <Routes>, <Route> 컴포넌트 사용

: <Routes> 컴포넌트는 여러 Route를 감싸 규칙이 일치하는 라우트 하나만을 렌더링 시켜주는 역할

: <Route>는 path 속성에 경로를, element 속성에는 컴포넌트를 넣어줌

 

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

function App() {
  return (
    <div className="App">
   	  // (1)
      <Header/>
      
      // (2)
      <Routes>
          <Route exact path="/" element={<Main/>}/>
          <Route exact path="/makeAccount" element={<MakeAccount/>}/>
          <Route exact path="/accountInfo" element={<AccountInfo/>}/>
          <Route exact path="/deposit" element={<Deposit/>}/>
          <Route exact path="/withdraw" element={<Withdraw/>}/>
          <Route exact path="/allAccountInfo" element={<AllAccountInfo/>}/>
      </Routes>
    </div>
  );
}

(1) <Header/>는 고정

(2) <Header/>는 고정한 채로 한 페이지 내에서 URL을 바꾸어 가면서 해당 페이지를 렌더링 하여 가져옴

 

3. <Link> 컴포넌트 사용

: 웹 페이지에서 원래의 링크를 보여줄 때에는 a 태그를 사용해서 새로 불러왔지만, React Router는 페이지를 새로 불러오지 않기 때문에 한 페이지 내에서 다른 페이지를 렌더링 하기 위해 Link 컴포넌트를 사용

 

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

const Header = () =>{
    const style = {backgroundColor:"white", width:"100%", position:'fixed', left:0, top:0, zIndex:80};
    
    return(
        <div style={style}>
           <ul className='nav-items'>
            <li className="nav-item">
                <Link to={"/"} id="logo"><i>toto<b>bank</b></i></Link>
            </li>
            <li className="nav-item">
                <Link to={"/makeAccount"}>계좌개설</Link>
            </li>
            <li className="nav-item">
                <Link to={"/deposit"}>입금</Link>
            </li>
            <li className="nav-item">
                <Link to={"/withdraw"}>출금</Link>
            </li>
            <li className="nav-item">
                <Link to={"/accountInfo"}>계좌조회</Link>
            </li>
            <li className="nav-item">
                <Link to={"/allAccountInfo"}>전체계좌조회</Link>
            </li>
           </ul>
        </div>
    )
}

: <Link to="path">링크명</Link> 형식으로 사용하며 to에 들어가는 경로의 경우 <Route>에서 설정한 path와 동일해야 함