React Router의 동적 라우팅(Dynamic Routing)이란 뭘까?

Routing

다른 페이지로 넘어갈 때 라우팅을 사용할 수 있다.

 

이 기능을 활용하려면 다음의 모듈을 설치해야한다.

 npm install react-router-dom

 

아래는 활용 예시다.

import Chat from './pages/Chat';
import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
...

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Members />}></Route>
          <Route path="/members" element={<Members />}></Route>
          <Route path="/members/:userId" element={<MemberProfile />}></Route>
          <Route path="/notice" element={<Notice />}></Route>
          <Route path="/chat" element={<Chat />}></Route>
          <Route path="/chat/:userId" element={<ChatRoom />}/>
        </Routes>
      </BrowserRouter>
    </div>

  );

}


export default App;

---

정적 라우팅(Static Routing)?

프로젝트에 사용할 경로들과 보여줄 컴포넌트들을 모두 정의해두는 방식이다.

import React from 'react'; 
import { BrowserRouter, Route, Routes } from 'react-router-dom'; 

const Router = () => { 
    return ( 
        <BrowserRouter> 
            <Routes> 
                <Route path="/main" element={<Main />} /> 
                <Route path="/chat/1" element={<ChatRoomOne />} /> 
                <Route path="/chat/2" element={<ChatRoomTwo />} /> 
                <Route path="/chat/3" element={<ChatRoomThree />} /> 
            </Routes> 
        </BrowsweRouter> 
        ) 
    } 

    export default Router;

 

동적 라우팅(Dynamic Routing)?

경로를 미리 정해두지 않고 동적으로 설정하는 방식
: 기호를 사용해 /:문자열 형태로 설정하면 된다.

         <Route path="/chatRoom/:userId" element={<ChatRoom />}/>

 

여기에서 userId를 path parameter라고 한다.
이는 url에 있는 값을 매개변수처럼 사용하는 것으로 이를 활용하면 페이지 별 다른 UI를 보여줄 수 있다.

Path Parameter활용

path parameter 를 활용해야 하는 때는 언제일까?
: 이전 페이지에서 어떠한 정보를 넘기고 싶을 때

(예를 들어 채팅 룸에서 채팅할 때 상대 사용자의 Id를 활용해서 그 상대를 특정하여 대화할 때, 이 데이터를 활용할 수 있겠다.)

 

그럼 이 값을 어떻게 가져올 수 있을까?

 

React에서 제공하는 훅을 활용하면, path parameter들을 객체 형태로 받아올 수 있다.
가장 대표적인 훅은 useParams()다.

 

다음은 useParams() 활용 예시다.

1. 우선 라우트 경로를 지정한다.

 <Route path="/chat/:userId" element={<ChatRoom />}/>

2. <Link> 에서 to를 사용하여 특정 컴퍼넌트에 링크를 연결한다.

 <Link to={`/chat/${userId}`}>
              <ChatListItem 
                  key={user?.id}
                  id={user?.id || ''}
              />
 </Link>

3. 해당 url에 접속한다.

https://도메인어쩌구/chat/123

이 API 주소에 접속하면, <ChatRoom /> 페이지로 넘어간다.

4. path parameter받아오기

아래와 같이 useParams()를 활용하면 { userId:'123'} 형태의 객체로 받아올 수 있다.

key : Route에서 설정한 path parameter이름
value : Route에서 설정한 path parameter에 실제 전달된 값.

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

const params = useParams();
const userId = params.userId

console.log(params);  // {userId:'123'}
console.log(userId);  // 123

 

 

이렇게 객체로 가져오는 것,
그 객체에서 key값을 통해 value를 가져올 수 있다는 것을 확인할 수 있다.

5. 받아온 값 활용하기

나는 이 값을 string로 사용하고 싶다.

대충 userId에 해당하는 사용자의 이름을 찾고 싶다고 해보자.

getusernamedbyid는 파라미터로 string타입의 userId를 원하고 있다.

이때  useParams를 활용할때 주의해야 할 점이 있다.

// userID로 사용자 이름 찾는 함수
const getUserNameById = (userId: string) => {
  const user = userList.find((user) => user.id === userId);
  return user?.userName;
};

export default function ChatRoom() {
  const params = useParams();
  const userId1 = params.userId;


  console.log(userId1);
  const { userId } = useParams();  // 반환값 : string | undefined
  const { userId } = useParams().userId;  // 반환값 : string | undefined
  const { userId } = useParams() as { userId: string };  // 반환값 : string
  const userName = getUserNameById(userId);

  console.log(userName);

 

 

Typescript를 사용할 때, 공식문서에 정의된 방식으로 사용하면 타입에 undefined를 포함하게 된다. 그래서 useEffect에서 fetch 요청을 위해 useParams의 반환값을 전달하면 타입 에러가 발생한다.

 

일단 지금까지 내가 찾은 해결 방법은 아래와 같은 방법이다.
(더 좋은 방법이 있는 지는 아직 잘 모르겠다.)

  const { userId } = useParams() as { userId: string };

 

++추가

 

• useParams에서 as { userId: string }로 강제 캐스팅하는 방법은 경우에 따라 안전하지 않을 수 있다.
• TypeScript에서 타입 안전성을 유지하려면, userId가 undefined가 아닌지 확인 후 userId를 사용하거나, userId || ''와 같이 기본값을 설정하는 방법이 더 안전하다.

 

---

동적 라우팅에서 활용할 수 있는 React Routing Hook

동적 라우팅에서 활용할 수 있는 유용한 React 훅들에는 useParams, useNavigate, useLocation, useSearchParams등이 있다.

1. useParams

• 역할: URL 경로에 포함된 동적 매개변수 값을 가져오는 데 사용한다.
• 사용 예시: URL이 /chat/:userId인 경우 userId 값을 가져와 컴포넌트 내에서 사용할 수 있다

import { useParams } from "react-router-dom"; 
const ChatRoom = () => { 
	const param = useParams(); 
    return <div>회원 ID: {param.userId}</div>; };

2. useNavigate

• 역할: 프로그래밍 방식으로 다른 경로로 이동할 수 있도록 한다.
• 사용 예시: 특정 조건을 만족할 때 다른 페이지로 이동하거나, 버튼 클릭 시 다른 경로로 리디렉션할 때 유용다.
  • 리디렉션 : 웹사이트에서 특정 조건을 만족하거나 사용자가 특정 경로에 접근했을 때 다른 경로로 자동으로 보내주는 기능이다. 예를 들어, 로그인하지 않은 사용자가 프로필 페이지에 접근하려고 하면, 로그인 페이지로 리디렉션 할 수 있다.

  import { useNavigate } from "react-router-dom";
  
  const HomePage = () => {
    const navigate = useNavigate();
  
    const goToProfile = () => {
      navigate(`/chat/234`); // userId로 이동
    };
  
    return <button onClick={goToProfile}>프로필로 이동</button>;
  };

3. useLocation

• 역할: 현재 경로에 대한 정보를 가져온다. 현재 경로, 검색 쿼리, 해시 등을 확인할 수 있다.
• 사용 예시: 현재 위치에 따라 특정 컴포넌트를 표시하거나, 쿼리 파라미터에 따라 데이터를 다르게 로드할 때.

import { useLocation } from "react-router-dom"; 
const SearchResults = () => { 
	const location = useLocation(); 
    const query = new URLSearchParams(location.search); 
    const searchTerm = query.get("query"); 
    return <div>검색어: {searchTerm}</div>; 
};

 

4. useSearchParams

URL의 쿼리 파라미터를 읽고 설정할 수 있는 훅

• 쿼리 파라미터 읽기: URL에 포함된 쿼리 파라미터 값을 가져올 수 있다.
• 쿼리 파라미터 설정: 상태나 사용자 입력에 따라 동적으로 쿼리 파라미터를 업데이트하여 URL을 변경할 수 있다.

[참고자료]
https://sylagape1231.tistory.com/112