[React] react-router-dom v6을 이용한 라우팅 기능 구현하기

서론

작년 겨울 즈음에 React Router v6가 나오면서 라우터를 적용하는 방법이 기존의 라우터를 적용하는 방법과 조금 달라졌다. 그래서 이번 글에서는 리액트에서 제공하는 react-router-dom v6 버전 라이브러리를 이용하여 프로젝트 경로에 따라 다른 화면을 보여주는 기능을 구현해보고자 한다.

 

이번 글의 목차는 다음과 같다.

 

• 프로젝트 생성하기
• react-router-dom 라이브러리 설치하기
• 화면 전환을 위한 서브 페이지 생성하기
• 라우터 적용하기
• 파라미터 적용하기

프로젝트 생성하기

npx create-react-app router-example

router-example 자리에는 프로젝트명으로 정의할 문자열을 입력한다. 프로젝트가 생성되면 해당 프로젝트로 이동 후 프로젝트가 정상적으로 실행되는지 확인한다.

cd router-example
npm start

다음과 같은 화면이 나온다면 성공적으로 리액트를 실행한 것이다.

라이브러리 설치하기

이제 라우터 기능을 사용하기 위한 라이브러리를 설치해보자. 먼저 프로젝트를 종료하고 터미널에 아래 명령어를 입력하여 라이브러리를 설치한다.

yarn add react-router-dom

컴포넌트 생성하기

다음으로는 페이지 전환에 필요한 몇 개의 컴포넌트를 생성하고자 한다.

예시를 들기 위해 회원 가입, 로그인, 메인페이지 3개의 컴포넌트가 있다고 가정하고 컴포넌트를 구성해보자.

 

먼저, src 디렉토리 안에 pages 라는 디렉토리를 생성한다. 다음으로 pages 디렉토리에 다음과 같이 3개의 파일을 생성한다.

 

• src/pages/SignUp.js

import React from "react";

const SignUp = () => {
    return (
        <div>
            <h1>회원가입 페이지 입니다.</h1>
        </div>
    );
};

export { SignUp };

• src/pages/Login.js

import React from "react";

const Login = () => {
    return (
        <div>
            <h1>로그인 페이지 입니다.</h1>
        </div>
    );
};

export { Login };

• src/pages/Home.js

import React from "react";

const Home = () => {
  return (
    <div>
      <h1>메인 페이지 입니다.</h1>
    </div>
  );
};

export { Home };

다음으로 프로젝트에 라우터를 적용하기 위해 index.js 파일을 수정해야 한다.

 

• src/index.js

import { BrowserRouter } from "react-router-dom"; // 추가하기

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

해당 부분을 아래처럼 변경하기

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

라우터 적용하기

이제 App.js 파일을 수정하여 생성된 3개의 페이지에 대한 라우팅을 적용해보자.

 

우선 아래와 같이 3개의 컴포넌트를 불러온 후 다음과 같이 코드를 구성하고 프로그램을 실행해보자.

import {Home} from './pages/Home';
import {Login} from "./pages/Login";
import {SignUp} from "./pages/SingUp";

function App() {
  return (
    <div className="App">
        <Home/>
        <Login/>
        <SignUp/>
    </div>
  );
}

프로그램 실행 시 처음 화면 결과

localhost:3000/ 경로에 위 사진과 같은 결과가 나올 것이다. 우리는 3개의 컴포넌트가 한 화면에 나오도록 동작하길 원하는 것이 아니라 경로가 달라질 때마다 다른 화면을 보여줄 수 있도록 하는 것이 목표이다. 이제 라우팅 기능을 단계적으로 적용해보자.

function App() {
  return (
    <div className="App">
        <Routes>
          <Route path="/" element={<Home />}></Route>
          <Route path="/login" element={<Login />}></Route>
          <Route path="/signup" element={<SignUp />}></Route>
        </Routes>
    </div>
  );
}

코드를 위와 같이 수정 후 프로그램을 실행해보자. 프로그램은 시작하면 localhost:3000/ 경로로 접속하기 때문에 아래와 같은 결과를 얻을 수 있을 것이다.

이제 Link 컴포넌트를 통해서 구성한 다른 페이지로 이동하는 기능을 만들어보자.

리액트에서는 페이지 이동 시 사용하는 <a> 태그를 사용하지 않는다. <a> 태그는 페이지(브라우저)를 새로고침 하기 때문에 비효율적이므로 리액트에서는 대부분의 라우팅 기능을 구현할 때 Link를 사용한다.

 

src/pages/Home.js 파일을 다음과 같이 수정하자.

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

const Home = () => {
  return (
    <div>
      <h1>메인 페이지 입니다.</h1>
      <ul>
        <li><Link to='/login' style={{textDecoration: 'none', color: 'blue'}}>로그인</Link></li>
        <li><Link to='/signup' style={{textDecoration: 'none', color: 'blue'}}>회원가입</Link></li>
      </ul>
    </div>
  );
};

export { Home };

다시 페이지를 렌더링 하고 결과를 확인하면 다음과 같은 결과를 얻을 수 있다.

로그인, 회원가입 링크가 생긴 것을 확인할 수 있으며 각각의 링크를 클릭하면 우리가 지정했던 localhost:3000/login, localhost:3000/signup 경로로 이동한다. 결과는 다음과 같다.

파라미터 적용하기

마지막으로 주소에 값을 넣어서 사용하는 URL 파라미터 사용 방법에 대해서 알아보자.

우선 src/App.js 파일의 로그인 부분을 다음과 같이 수정해보자.

<Routes>
    <Route path="/" element={<Home />}></Route>
    <Route path="/login/:username" element={<Login />}></Route>
    <Route path="/signup" element={<SignUp />}></Route>
</Routes>

 

URL 파라미터는 : 기호를 이용하여 정의한다. 파라미터를 여러 개를 정의할 수도 있다.

위와 같이 파라미터를 정의하면 우리는 localhost:3000/login/limsw 이런 식으로 파라미터 값을 넘겨줄 수 있다.

 

이제 src/pages/Login.js 파일을 수정하자.

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

const Login = () => {
    const params = useParams();
    const user = params.username;
    return (
        <div>
            <h1>로그인 페이지 입니다.</h1>
            <p>{user} 라는 파라미터가 입력됨</p>
        </div>
    );
};

export { Login };

이제 localhost:3000/login/limsw 경로로 접속을 해보면?

파라미터로 입력받은 limsw 라는 값이 화면에 렌더링되어 나타난 것을 확인할 수 있다.

---

출처

• https://reactrouter.com/docs/en/v6/getting-started/tutorial
• https://velog.io/@soryeongk/ReactRouterDomV6