[Frontend][React] React 라우터(Router) 세팅

이 글은 리액트 프로젝트에서 페이지 이동을 책임지는 라우터를 세팅하는 방법에 대해 정리한 글입니다.

---

라이브러리 설치

리액트에서 라우터를 만들기 위해서는 react-router-dom을 설치해야 한다.

• react-router-dom : 리액트에서 페이지 이동을 담당하는 표준 라이브러리

아래 명령어를 통해 라이브러리를 설치한다.

npm install react-router-dom

---

도착 페이지 제작

라우터를 적용하기 위해서는 이동할 페이지가 있어야 한다. 만약 이동할 페이지가 없다면, 임시로 이동할 페이지를 간단하게 아래와 같이 작성한다.

const TestPage = () => {
  return <div>환영합니다.</div>;
};

export default TestPage;

---

App.tsx 수정

앞으로 src/App.tsx 파일은 페이지를 바꿔주는 라우터의 역할을 수행한다. 라우터 역할을 수행하기 위해서는 아래와 같이 구성해야 한다.

import { BrowserRouter, Routes, Route } from "react-router-dom";
import MainPage from "./pages/TestPage";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/test" element={<TestPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

• <BrowserRouter> : 리액트 앱과 브라우저의 주소창(URL)을 연결해주는 가장 바깥쪽 껍데기 | 보통 src/App.tsx의 최상위에서 딱 한 번 감싸주는 형태로 사용
• <Routes> : 여러 개의 경로(<Route>)들을 묶어서 관리하는 컨테이너 (과거 v5에서는 <Switch>로 사용)
• <Route> 주소(URL)와 컴포넌트를 연결해주는 개별 규칙
  • path : 주소창 경로 속성 (조건)
  • element : 어떠 화면(컨테이너)를 보여줄 지 결정 (결과)

---

페이지 이동 기능 추가

페이지 이동 기능을 버튼 등에 추가할 때에는 useNavigate 훅(Hook)을 사용한다.

페이지 내에 이동 함수를 먼저 생성하고,

...

const LoginPage = () => {
  ...

  // 이동 함수 생성
  const navigate = useNavigate();
  
  ...
};

export default LoginPage;

이렇게 생성한 이동 함수를 통해 특정 기능을 수행하는 함수에 추가한다.

  ...
  
  // 로그인 버튼 실행 함수
  const handleLogin = (e: React.SyntheticEvent<HTMLFormElement>) => {
    ...

    navigate("/main");
  };
  
  ...