React Router

React Router는 리액트 애플리케이션에서 페이지 이동, 즉 라우팅을 관리해주는 라이브러리이다.

웹사이트에서 URL에 따라 다른 컴포넌트를 보여주고 싶을 때 쓴다.

왜 필요할까?

웹서비스는 여러 페이지가 있고, 사용자가 주소(URL)를 바꾸거나 링크를 클릭하면 그에 맞는 화면이 나와야 한다.

리액트는 SPA(Single Page Application)이기 때문에 페이지 전체를 새로고침하지 않고도 URL에 따라 다른 화면을 보여줘야 한다.

React Router는 이걸 쉽게 구현할 수 있게 도와준다.

어떻게 쓸까?

jsx
복사편집
import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function Home() {
  return <h1>홈 화면</h1>;
}

function About() {
  return <h1>소개 화면</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">홈</Link> | <Link to="/about">소개</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

BrowserRouter로 라우터를 감싸고, Routes 내부에 Route를 정의한다.

각 Route는 path와 보여줄 컴포넌트를 element로 받는다.

Link는 페이지 이동용 링크를 만들어준다.

이렇게 하면 URL이 바뀔 때마다 알맞은 컴포넌트가 화면에 나온다.