동적 라우팅

 

정적 라우팅

 

라우터 컴포넌트에서 미리 프로젝트에서 사용할 수 있는 경로들과

해당 경로로 접속했을 때 보여줄 컴포넌트를 모두 정의해두는 방식

 

 복잡하고 큰 애플리케이션에서는 경로를 정해놓는 방식은 처리하기 힘든 상황이 생길 수도 있음

 

 

 

예시)

 

리스트 페이지를 기본 경로 라우터로 설정하는데

상세 페이지를 post/postid로 정해서 ex) /post/1 1번 게시물 이라 한다면

라우터 페이지에 <Route Path = "post/1" element={<첫번째 게시물 />} 를 추가해야함

페이지가 p1000 가 된다면 천 페이지를 라우터 컴포넌트 안에 설정해야하는데 이는 매우 번거로움

또한 중간에 포스트를 삭제한다면 라우터에 가서 해당 코드를 삭제해야함

 

 

-> 모든 라우터를 정의해두는 정적 라우팅은 라우터를 유연하게 정의할 수 없음

-> 이를 해결하기 위해서 동적 라우팅이 나옴

 

 

 

 

 

 

동적라우팅

 

: 특정 규칙을 정의한 후 규칙에 부합하는 URL 이 있을 경우 해당하는 element를 보여주게 설정함

 

/post/ 로 시작하는 모든 URL은 상세페이지로 연결되게 설정하는 방식

/post/2, /post/3 등 post 규칙만 지켜진다면 상세페이지로 연결시킬 수 있음

 

-> 애플리케이션을 확장성 있게 만들 수 있음

 

 

<Route path = "/post/:문자열" element={<Detail />} />

 

 /post/에서 경로 뒤에 무슨 글자가 오든 이 라우터로 연결이 되어 디테일 컴포넌트를 보여주게 됨

 

여기서  "/post/:id 에서 id를 path parameter라고 하는데 파라미터는 매개변수라는 의미를 가지고 있음

 

 

 

 

 

path parameter
: path parameter를 활용하면 동적라우팅을 하면서 다른 UI를 보여줄 수 있음

 

path parameter를 통해서 큰 틀은 동일하되 다른 UI를 보여줄 수 있도록 처리할 수 있음

path parameter 는 URL에 있는 값을 마치 매개 변수처럼 사용함

즉 유저가 /post/2 로 접근하게 되면 id라는 이름에 2라는 이름의 값이 전달됨

 

컴포넌트 안에서 이 값을 이용해 특정처리를 하는 코드를 작성한다면

동일한 컴포넌트에서 다양한 UI를 보여줄 수 있음

 

 

 

 

useParams hook (from react-router-dom)
: path parameter의 값을 편하게 가져올 수 있고 값이 바뀌면 리렌더링함

 

 

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

// 유저에 대한 정보는 /api/users/[user의 id] api를 통해 가져오게 됨
// 리스트 페이지에서 상세 페이지로 이동시킬 때,
// path parameter에 user의 iD를 포함해서 라우팅 시켜줬기 때문에
// useParamas 에서는 path parameter의 값을 가져온 뒤
// 이를 이용해서 API를 호출하고 응답받은 데이터를 이용해 UI를 만들어 냄


const Detail = () => {
	const params = useParams(); // useParams 훅을 호출한 반환값을 params에 할당
    const userId = params.id // userId는 params 객체에 id 값을 할당받게 됨
    	
    const [user, setUser] = useState();
    useEffect (()=>{
    	fetch("api 주소/${userId}")
        .then (res => res.json())
        .then ((result) => setUser(result.data)); // data에 있는 객체값이 필요
    },[userId]); // userId에 변화가 있을 때 데이터를 받아올 수 있음
    	console.log (user); // 객체로 이루어진 데이터가 들어오는 것을 확인할 수 있음
        
        const { first_name, email, avatar } = user; // 구조분해 할당
        
        return (
		<div className = "detail">
        	<article>
            	<p> {first_name} </p> 
                <p> {email} </p>
                <img alt="avatar" src={avatar} />
             </article>
          </div>
	);
};

export default Detail

 

 

 

-> 리스트페이지에서 한 유저를 클릭하면 해당 유저의 상세 정보가 담긴 상세페이지로 이동할 수 있음