리액트: React Router

1. React Router의 기능

웹 애플리케이션에서 전통적인 라우팅이란 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미한다. 이렇게 웹 애플리케이션을 만들 때 페이지별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 React Router의 기능이다. React Router는 주소에 따른 페이지를 매칭해주며, 개발 시 페이지의 depth를 적용하고 parameter를 던질 수도 있다. React Router를 통해 사이트 맵을 잡아준다 생각하면 될 것 같다.

[참고한 예시 코드 링크: 멋사리액트코스_4강]

2. 프로젝트에 라우터 적용하기

프로젝트를 생성하고, 라우터 라이브러리를 설치한다.

npm install react-router-dom

React Router를 적용하기 위해 src/index.js 파일에서 App 컴포넌트를 BrowserRouter로 감싸준다.

import ReactDOM from 'react-dom/client';
import './index.css';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

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

root.render(
    <BrowserRouter>
      <App />
    </BrowserRouter>
);

3. 첫 화면에 노출될 메뉴바 적용하기

메뉴바의 구성은 아래와 같다.

메뉴바는 2개의 링크로 이루어져있으며, 각 링크를 클릭하면, to에 넣은 데이터가 url에 추가되며 해당 페이지를 요청하게 된다.

[Menubar.js]

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

const Menubar = () => {
    return (
        <div>
            <ul>
                <li>
                    <Link to="/home">Home</Link>
                </li>
                <li>
                    <Link to="/book">Books</Link>
                </li>
            </ul>
        </div>
    );
};

export default Menubar;

메뉴바의 링크를 통해 보여지게 될 페이지 구성은 아래와 같다.

[Home.js]

const Home = () => {
  return (
    <div>
      <h1>LIKELION React Course</h1>
      <p>리액트 라우터 실습 프로젝트입니다.</p>
    </div>
  );
};

export default Home;

[Book.js]

const Book = () => {
    return (
        <h1>This is Book</h1>
    );
}

export default Book;

렌더링 할 App 컴포넌트에 아래의 Route 사용 규칙을 적용하여, ‘App.js’ 와 같이 Routes와 Route로 보여줄 컴포넌트의 규칙을 작성한다.

*Route 사용 규칙

<Route path="주소규칙" element={보여줄 컴포넌트}

path에 “/”를 입력하면, URL 로 입장했을 때 보여지는 첫 링크 페이지가 된다.

[App.js]

import { Routes, Route } from 'react-router-dom';
import Book from "./Book";
import Home from './Home';
import Menubar from './Menubar';

const App = () => {
    return (
        <Routes>
            <Route path="/" element={<Menubar />} />
            <Route path="/home" element={<Home />} />
            <Route path="/book" element={<Book />} />
        </Routes>
    );
}

export default App;