[React] URL 파라미터로 다중 페이지 만들기

목표

URL로 부터 파라미터 값을 받으면, 파라미터에 따라 대응되는 페이지를 하나의 라우터로 다중 생성하고

파라미터에 따라 각자 다른 페이지를 출력하도록 한다.

 

라우터로 다중 페이지 만들기

<Route path="/detail/:id" element={<DetailCard shoes={shoes} />}/>

'/:id' 를 붙임으로서 /detail 페이지 뒤에 어떤 파라미터를 입력했을 때, 이 URL에 따라 기존에 작성해둔 페이지가 없더라도 404error가 발생하지않고 페이지가 정상적으로 출력된다.

 

예로 localhost:3000/detail/0   ,  localhost:3000/detail/1  , localhost:3000/detail/2, ... localhost:3000/detail/999999

모두 기존에 생성해둔 페이지가 없더라도 404 error 가 발생하지 않고 페이지가 출력된다.(물론 해당 페이지에서 파라미터를 사용하여 특정 데이터를 호출하는 경우, 파라미터에 대응되는 데이터가 없으면 오류 발생)

 

자식 컴포넌트가 URL로부터 받은 파라미터를 사용하는 방법

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

function DetailCard(props){

    let {id}=useParams();
    
    return(
        <>
        (생략)
        </>
    )
}

파라미터 사용을 위해 useParams를 import하고 부모 컴포넌트에서 파라미터 이름으로 사용한 id를 받아올 수 있다.

 

다중 파라미터 사용

<Route path="/detail/:id/:content" element={<DetailCard shoes={shoes} />}/>

localhost:3000/detail/0/안녕하세요   ,  localhost:3000/detail/1/반갑습니다  , localhost:3000/detail/2/React 등과 같이

파라미터를 다중으로 사용가능하다. 파라미터 갯수 제한없이 사용할 수 있으며, 중간에 파라미터가 아닌 고정 주소를 넣을 수도 있다.(ex) localhost:3000/detail/:id/react/:content 처럼 중간에 고정 주소인 react 삽입 가능)

 

 

 

출처 : 코딩애플_React 기초부터 쇼핑몰 프로젝트까지!

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌