ReactJS Course [8] - React Router Dom | Routes in React

html로 작업 할 때는 html 페이지들을 메인 html 페이지에 링크를 걸어주기만 하면 되었다. 그러나 React에서는 그렇게 할 수 없다.

React Router

리액트 안에서 길을 찾아서 페이지들을 보기 위해서는 react router dom이라는 라이브러리가 필요하다. 그래서 react router dom을 사용할건데, 이렇게 써서 사용할 것이다.

import {BrowserRouter as Router, Routes, Route}from 'react-router-dom'

'as'키워드로 3가지 컴포넌트를 임포트했다.

Routes는 웹사이트의 특정 부분만을 바꾸는 데 사용할 수도 있다. Route는 웹사이트에서 가지고자 하는 페이지를 정의하는 데 사용되는 등 다들 서로 다른 역할을 한다.

import "./App.css";
import Axios from "axios";
import {BrowserRouter as Router, Routes, Route}from 'react-router-dom'
import { useState, useEffect } from "react";

function App () {
    
    return (
        <div className = "App">
            <Router>
                <Routes>
                    <Route/>
                </Routes>
            </Router>
        
        </div>
    )
}

export default App;

이렇게 기본 모양새를 갖춘 형태가 완성되었다.

<div className = "App">
            <Router>
                <Routes>
                    <Route path="/"/>
                </Routes>
            </Router>
        
        </div>

이렇게 하면 이 페이지가 (App) 가장 기본이 되는 메인 페이지라는 것을 표시한 것이다.

<div className = "App">
      <Router>
                <Routes>
                    <Route path="/" element={<Home/>}/>
                </Routes>
      </Router>
        
</div>

그리고 이렇게 설정하면 경로가 / 일 때 Home element를 보여주도록 설정하는 것이 된다. (단, 이 때 Home element를 따로 만들고 App 페이지에 import까지 해야 한다.)

만약 다른 링크에서 다른 element를 보여주고 싶다면 같은 방식으로 만들어려주면 된다. element를 작성하고, 주소를 설정하고 해당 주소에서 해당 element를 보여주도록 설정하면 된다.

만약 내가 설정하지 않은 주소들을 입력하면 어떻게 될까? 아무것도 안 보인다. 이 상황에 대한 핸들링을 위해 할 수 있는 방법이 있다.

<Route path="*" element={<h1>404</h1>}/>

이렇게 path를 * 로 설정해주면 설정한 주소 외의 경로를 컨트롤할 수 있다.

라우트 사이를 오가기 (직접 입력 제외)

그러면 내가 직접 링크를 쳐서 들어가는 것 말고, 어떻게 다른 페이지들에 접근할 수 있을까?

이 부분은 우리가 경로를 직접 설정한 Route 컴포넌트 말고 다른 두 개의 컴포넌트 Router와 Routes를 보면서 생각해볼 수 있다.

Routes는 각각의 Route 컴포넌트들이 이 아래에 있다는 걸 알려주는 역할을 한다.
Router 컴포넌트는 리액트 돔에게 안에 뭐가 있던간에, 그 안에 있는 요소들이 리액트 라우터 돔 기능을 사용할 수 있다는 것을 알려주는 것이다.

우리가 navbar를 만들어보고 싶다고 생각해보자. 먼저 import하는 부분에 Link 컴포넌트에 대해서도 추가가 필요하다.

라우터 컴포넌트 안에 div를 추가하고, Link에 to 속성으로 경로를 설정해주면 된다.

<div>Navbar 
                <Link to="/"> Home </Link>
                <Link to="/menu"> Menu </Link>
                <Link to="/contact"> Contact </Link></div>

그러면 우리가 어디로 가든 위의 네비게이션 바를 볼 수 있게 된다.

<div className = "App">
            <Router>
                <div>Navbar 
                <Link to="/"> Home </Link>
                <Link to="/menu"> Menu </Link>
                <Link to="/contact"> Contact </Link></div>
                <Routes>
                    <Route path="/" element={<Home/>}/>
                    <Route path="/menu" element={<Menu/>}/>
                    <Route path="/contact" element={<Contact/>}/>
                    <Route path="*" element={<h1>404</h1>}/>
                </Routes>
            </Router>
        
        </div>

그런데 어떻게 어디로 가든 페이지에 상관없이 계속 네비게이션 바를 볼 수 있는 것일까?

그 이유는 우리가 작성한 네비게이션이 Routes 컴포넌트 위에 위치해있기 때문이다. 우리는 React dom에게 div 부분은 웹사이트의 일부이고, 그 아래 Routes 부분이 변하는 것이라고 알려주는 것이다.

리액트 라우터에 관련한 모든 것은 Router 컴포넌트 안에 있어야 하기 때문에 우리는 네비게이션 바를 담당하는 div를 Router안에 넣었고, Routes 위에 설정하여 그 부분은 Route에 따라 영향을 받지 않도록 한 것이다.

그리고 더 코드를 깔끔해보이게 하고 싶으면 당연히 Navbar라는 컴포넌트를 따로 파서 import해서 사용할 수 있다.