[React] React의 동적 라우팅, useParams

1️⃣ 동적 라우팅 이란?

 

• 동적 라우팅(Dynamic Routing)은 웹 어플리케이션에서 클라이언트의 요청에 따라 동적으로 경로를 처리하는 라우팅 방식을 말합니다.
• 이는 사용자의 입력, 상태 변화, 또는 다양한 조건에 따라 서버가 어떤 페이지나 리소스를 제공할지를 결정하는 것을 의미합니다.
• 동적 라우팅은 정적 라우팅(Static Routing)과 대조적으로, 라우팅 규칙이 사전에 하드코딩되어 있지 않고 실행 시에 결정됩니다.

 

---

 

 

2️⃣ 동적 라우팅의 필요성

 

먼저, 정적 라우팅은 라우터 컴포넌트에서 사용할 경로와 해당 경로로 접속 시 보여줄 컴포넌트를 미리 정의합니다.

<Route path="/" element={<Main />}/>
<Route path="/login" element={<Login />}/>

 

여러가지 상세페이지와 내용이 있게 된다면  이렇게 경로를 미리 설정하는 방식은 비효율적 입니다.

 

저의 프로젝트로 예를 들어보자면

강아지의 보육일지에 글이 매일매일 하나씩 올라올텐데... 일지 목록을 보여주는 리스트 페이지와 각 상세 내용을 보여주는 상세페이지가 있을 때 모든 페이지를 이렇게 라우팅하는 것은 비효율적입니다.

<Route path="/" element={<Main />}/>
<Route path="/puppyNote/1" element={<첫번째 일지 />}/>
<Route path="/puppyNote/2" element={<두번째 일지 />}/>
..
<Route path="/puppyNote/50" element={<오십번째 일지 />}/>

 

이런 문제점을 해결하기 위해 동적 라우팅 방식을 사용합니다.

동적 라우팅은 url 형태를 미리 정의하지 않고 특정 규칙을 정의한 후에 규칙에 부합한 url이 있을 때 해당 엘리먼트가 보여줍니다.

 

 

---

 

 

3️⃣ react-router-dom 활용한 동적 라우팅 구현, Path Parameter

path prop에 : 기호를 사용해 경로/:문자열 형태로 설정합니다.

// 정적 라우팅
<Route path="/puppyNote/" element={<Detail />} />

// 동적 라우팅
<Route path="/puppyNote/: 문자열" element={<Detail />} />
<Route path="/puppyNote/: id" element={<Detail />} />
<Route path="/puppyNote/: value" element={<Detail />} />

 

여기서 문자열을 path parameter 라고 합니다.

url에 있는 값을 매개변수처럼 사용해서 페이지 별로 다른 UI를 보여주게 됩니다.

 

다시 말해

: 으로 구분해준 id 라는 값은 파라미터로 전달되어 이후 puppyNote 컴포넌트 내부에서 useParams 훅을 통해 추출하고 사용할 수 있습니다.

 

 

---

 

 

 

3️⃣ Path Parameter 활용

useParams hook을 사용해서 path parameter의 값을 가져오고, path parameter의 값이 바뀌면 컴포넌트를 리렌더링 해줍니다.

 

로그인 페이지로 예시를 들어보자면 아래와 같은 코드가 됩니다.

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

let Login = () => {

    let param = useParams();
   
 // useparams를 안쓴다면 아래와 같은 방식
 //   let {id} = useParams();

    return(
        <div>
            로그인 페이지
        </div>
    );
}

export default Login;

 

hook을 호출해 나온 반환값을 변수에 저장, 해당 값은 객체 형태 입니다.

이 때 객체 프로퍼티의 key는 Route에서 설정한 path parameter 입니다.

value는 path parameter에 실제 전달된 값이 됩니다.

만약, /login/:id 이고 id가 1이라면 { id : 1 } 값이 나오게 되는 것입니다.

 

 

참고 https://velog.io/@kandy1002/React-Router-Dom-%EA%B0%9C%EB%85%90%EC%9E%A1%EA%B8%B0

        https://velog.io/@rayong/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%8F%99%EC%A0%81-%EB%9D%BC%EC%9A%B0%ED%8C%85-useParams

 

---

 

 

 

프로젝트에 아직 적용은 안한 상태라

추후 적용하게 된다면 더 추가 작성하겠습니다!