📕 React Router

리액트 라우터를 하기 전에 SPA를 알아볼 필요가 있다.
우선 SPA란 Single Page Application의 약자이다. 페이지가 1개인 어플리케이션이라는 이야기다.
왜 요즘 SPA가 주목을 받느냐는 내가 작성한 게시물 React는 무엇인가?를 참고하면 될 것이다. 그런데 React에는 공식 Router 라이브러리가 존재하지 않는다.
그래서 우리는 react-router라는 서드파티 라이브러리로 라우터 기능을 구현할 것 이다.

🤞🏻 프로젝트를 준비해보자.

터미널 명령으로 프로젝트 생성

npx create-react-app router-exercise

프로젝트를 만든 파일 디렉토리로 이동해 react-router-dom 설치

cd router-exercise
// npm 으로 설치하기
npm install react-router-dom@6
// yarn 으로 설치하기
yarn add react-router-dom@6

✌🏻 프로젝트에 라우터 적용

src/index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

src/App.js

import React from "react";
import { Routes, Route, Link } from "react-router-dom";
export default function App () {
  return (
    <div className="App">
      <h1>Welcome to React Router!</h1>
      <Routes>
        <Route path="/" element={<Home />} />
  		<Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}
--------
function Home () {
  return (
    <>
      <main>
        <h2>Welcome to the homepage!</h2>
    	<p>You can do this, I believe in you.</p>
      </main>
      <nav>
    	<Link to="/about">About</Link>
      </nav>
    </>
  );
}
--------
function About () {
  return (
    <>
      <main>
        <h2>Who are we?</h2>
    	<p>That feels like an existential question, don't you think?</p>
      </main>
      <nav>
    	<Link to="/">Home</Link>
      </nav>
    </>
  );
}