[REACT] react router 사용해보기

리액트 라우터를 처음 사용해보고 간단히 정리한 내용입니다

참고로 리액트 라우터 v6를 사용했습니다

 

1. 라우팅이란?

간단히 설명하면 사용자가 요청한 url에 따라 알맞은 페이지를 보여주는 것을 말합니다.

여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지별로 컴포넌트들을 분리해가면서

프로젝트 관리하기 위해 필요한 것이 라우팅 시스템입니다.

 

2. react router 사용해보기

 리액트에서 라우트 시스템을 구축하기 위한 방법은 여러가지가 있지만 가장 인기있고 라우팅 기능만을

익히는데 적합한 react router를 사용해보겠습니다.

 

2.1. 설치

yarn add react-router-dom

 

 2.1. 프로젝트에 라우터 적용해보기

 

프로젝트에 리액트 라우터를 적용할 때는 BrowserRouter라는 컴포넌트를 사용하여 감싸줍니다.

//App.js

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

function App() {
  return (
    <BrowserRouter>
    </BrowserRouter>
  );
}

export default App;

 

 2.2. 페이지 컴포넌트 만들기

 

Home과 Profile 두 개의 컴포넌트를 만들어 보겠습니다.

//Home.jsx

import React from "react";

const Home = (props) => {
  return (
    <>
      <h1>Home</h1>
      <button>
        Go to Profile
      </button>
    </>
  );
};

export default Home;

//Profile.jsx

import React from "react";

const Profile = (props) => {
  return (
    <>
      <h1>Profile</h1>
      <button>
        Go to Home
      </button>
    </>
  );
};
export default Profile;

 

 

 2.3. 특정 경로에 원하는 컴포넌트 보여주기

 

//App.jsx

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Profile from "./components/profile";
import Home from "./components/home";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/home" element={<Home />}></Route>
        <Route path="/profile" element={<Profile />}></Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

 

2.4. Link 컴포넌트 사용하여 다른 페이지로 이동하기

 

import { BrowserRouter, Link, Route, Routes } from "react-router-dom";
import Profile from "./components/profile";
import Home from "./components/home";

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/profile">Profile</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/home" element={<Home />}></Route>
        <Route path="/profile" element={<Profile />}></Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

 

HTML의 link태그와 다른점

link 태그의 경우 전체적인 HTML 페이지가 다른 HTML로 교체되지만,
react routing을 이용하면 기존 페이지를 그대로 유지하고 SPA에서 제공하는 장점을 그대로 유지하면서 라우팅할 수 있기 때문에 성능에 좋음

 

 2.5. useNavigate

 

useNavigate는 Link 컴포넌트와 비슷하게 다른 페이지로 이동 해야하는 상황에서 사용합니다.

버튼을 누르면 해당 페이지로 이동합니다

 

/home.jsx

import React from "react";
import { useNavigate } from "react-router-dom";

const Home = (props) => {
  const navigate = useNavigate();
  return (
    <>
      <h1>Home</h1>
      <button
        onClick={() => {
          navigate("/profile");
        }}
      >
        Go to Profile
      </button>
    </>
  );
};

export default Home;

import React from "react";
import { useNavigate } from "react-router-dom";

const Profile = (props) => {
  const navigate = useNavigate();
  return (
    <>
      <h1>Profile</h1>
      <button
        onClick={() => {
          navigate("/Home");
        }}
      >
        Go to Home
      </button>
    </>
  );
};
export default Profile;