동적 라우팅을 이용한 게시글 별로 달라지는 URL 구현

서론

 게시판이나 프로필 페이지 등을 개발하다보면 URL이 엄청 많이 필요한 경우가 있다. 물론 일일이 route를 이용해서 작성할 수도 있겠지만 페이지 수가 사용자들의 활동에 따라 더 늘어날 수도 있기에 근본적인 문제 해결 방법은 아니다. 이럴땐 URL의 특정 부분에 변수를 사용하여 컴포넌트를 동적으로 렌더링하는 동적 라우팅을 이용하면 쉽게 해결할 수 있다.

 

동적 라우팅 사용법

 먼저 우리의 희망 react-router-dom을 설치하자. 이 글은 v6를 기준으로 작성하였다.

npm install react-router-dom

 

그 다음으로 동적 라우팅을 사용할 페이지에 변수를 전달하는 과정이 필요하다. 

import React, {useEffect, useState} from "react";
import { Link, useNavigate, useLocation } from "react-router-dom";

const Navigation = ({userObj, setIsLoggedIn}) => {
   
    return(
        <div>
            <Link to={`/${userObj}`}>프로필</Link>
        </div>
    )
};
export default Navigation;

그 다음으로 유저의 페이지를 보여주는 파일 혹은 게시글들을 보여주는 페이지가 필요하다. 이 페이지에서 useParams hook을 이용하여 위의 페이지의 userObj 변수를 받아와 parm에 저장하는 것이다.

 

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

const Profile = () => {
  const parm = useParams();
  const id = parm.profile;
  
  return (
    <div>
      <h1>User Profile: {id}</h1>
    </div>
  );
};

export default Profile;

마지막으로 라우팅을 담당하는 App.js 파일에서 id변수를 사용하면 된다.

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Profile from './Profile';

const App = () => {
  return (
    <Router>
        <Routes>
          <Route path="/:id" component={Profile} />
          <Route path="/" exact>
          </Route>
        </Routes>
    </Router>
  );
};

export default App;

9번째 줄에서 path prop안에 변수를 사용하기 위해 ':변수명' 문법을 사용하였다. :는 path parameter 앞에 쓰는 문법이다. 이렇게 하면 각 id별로 맞게 URL이 생길 것이다.