정적 라우팅은 라우팅을 설정하는 가장 기본적인 방법이다
즉 Router.js 컴포넌트에서 미리 프로젝트에 사용할 수 있는 경로들과 해당 경로로 접속했을 때 보여줄 컴포넌트들을 모두 정의해두는 방식이다. 이 방식은 복잡하고 규모가 큰 애플리케이션에서는 경로를 미리 설정하는 방식만으로는 처리하기 힘든 상황이 생길 수 있다

ex) 목록을 보여주는 리스트 페이지와 해당 리스트의 내용을 보여주는 상세 페이지가 있을 때, 일반적으로 리스트 페이지를 기본 경로 route로 설정하고 상세페이지를 /post/[포스트의ID]로 정해서 한다면 상세페이지의 수가 많아지면 어려움이 생긴다

모든 Router를 정의해두는 방식의 정적 라우팅은 Route를 유연하게 정의할 수 없다는 단점을 갖고 있다

동적 라우팅이란?

정적 라우팅의 불편한 점을 개선시키기 위해 등장한것이 동적 라우팅이다

• URL 설정시, URL 전체 형태를 미리 정의 하는것이 아니라, 특정 규칙을 정의한 후 규칙에 부합하는 URL이 있을 경우 해당하는 element를 보여주게 설정한다
  /post/1 /post/2 >> 1번포스트 상세페이지 2번페이지 상세페이지로 이동하는것이 아니라 어떤 아이디/숫자가 url주소로 와도 하나의 상세페이지로 연결되게 설정하는 방식이다
  Router 컴포넌트를 직접 수정하지 않아도 된다

<Route path:"/post/:문자열" element={<Detail />}
url에서 경로뒤에 무슨 글자가 오든 컴포넌트를 보여주게 된다

이때 동일한 상세페이지 UI가 아닌 품목별 데이터 별로 상세페이지를 구현하려면 path parameter를 사용하면 된다

Path parameter란?

동적 라우팅을 하면서 다른 UI를 보여줄 수 있다
ex) <Rout path:"/post/:id" element={<Detail />} />에서 path parameter의 이름은 id 이다

import Reat from "react";
import {BrowserRouter, Routes, Route} from "react-router-dom";
import Detail from "./pages/Detail/Detail";
import List from "./pages/List/List";

const Router = () => {
  return(
    <BrowserRouter>
    	<Routes>
    		<Route path="/" element={<List />}>
    		<Route path="/post/:id" element={<Detail />} />
    	</Routes>
    </BrowserRouter>
  )
}

큰 틀(레이아웃)은 동일하되 다른 UI를 보여주도록 처리하려면 react-router-dom에서 useParams hook을 가져와 사용해야 한다

useParams hook

• path parameter의 값을 편하게 가져올 수 있다
• path parameter의 값이 바뀌면 컴포넌트를 리렌더링 해주는 기능을 제공한다

사용 예시

import React from "react";
import {Link, useParams} from "react-router-dom";
import "./Detail.scss";

const Detail = () => {
  const params = useParams();
  return(
    <section>
    	<h1>This is Detail Page</h1>
    	<h2>path parameter = {params.id}</h2>   
    	<Link to ="/">Go Back To List Page</Link>
    </section>
  )
}

useParams() 훅을 호출하면 path params 값을 객체 형태로 반환해 준다
즉 params 라는 변수에는 객체 형태의 값이 할당된 것이다. 이때 객체 형태의 key는 Route에서 설정한 path parameter의 이름이며 value는 path parameter에 실제로 전달된 값이다
만약 실제 경로를 post/1로 접속 했다면 useParams hook의 return값은 {id:1}이 된다

이값을 이용해 URL마다 다른 UI를 보여줄 수 있도록 구현해보자 상세페이지에는 단일 객체의 데이터를 사용한다

const Detail = () => {
  const params = useParams();
  const userId = params.id;
  const [user, setUser] = useState();
  useEffect(()=>{
    fetch(`https://regres.in/api/users/${userId}`)
    .then(response => response.json())
    .then(result => setUser(result))
  }, [userId]);
  
  //의존성 배열에 userId를 넣어서 url주소가 바뀔때 마다 들어오는 데이터가 변경되도록
  
  return(
    <section className="detail">
    	<article>
    		<p>
    			<strong>이름</strong>
    		</p>
    		<p>이메일</p>
    		<img alt="avator" src="" />
    	</article>
    </section>
  )
}