[React] 11. 라우팅-3 양산형 라우팅

이전 글 ▼

0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅

1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX

2. 2023.05.26 - [🌌 | WEB DEV/React] - [React] 2. state (변수, array, object)

2-1. 2023.05.27 - [🌌 | WEB DEV/React] - [React] 2-1. array state 정렬하기 ( .sort()활용)

3. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 3. 컴포넌트 (Component)

4. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 4. 동적인 UI 제작하기

5. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 5. 반복되는 부분 축약하기 (map)

6. 2023.05.29 - [🌌 | WEB DEV/React] - [React] 6. props

7. 2023.07.03 - [🌌 | WEB DEV/React] - [React] 7. 이미지 삽입하기(css, html, public폴더에서 가져오기)

8. 2023.07.06 - [🌌 | WEB DEV/React] - [React] 8. 다른 파일에서 데이터 가져오기

9. 2023.07.09 - [🌌 | WEB DEV/React] - [React] 9. 라우팅-1 (react-router-dom세팅, Routes, Route, Link)

10. 2023.07.10 - [🌌 | WEB DEV/React] - [React] 라우팅-2 (useNavigate, 404page, Nested Routes, Outlet)

 

라우팅을 할 때 비슷한 url의 페이지들을 만들어서 관리해야할 때가 있다.

예를 들어 컨텐츠의 페이지 혹은 이 블로그의 포스트 url 같은 것처럼

작은 변화로 라우팅을 하고 싶은 경우 하나씩 만들기는 귀찮을 수 있다.

ex) https://bluishhot-star.tistory.com/189(숫자 변화로 구분됨)

 

이때 사용할 수 있는 방법이 존재한다!

 

1. 상세페이지 여러개 만들기  ( :URL 파라미터 )

첫번째 방법은 :URL파라미터(페이지구분변수) 를 이용하는 것이다.

 

사용법

<Route path="/URL/:구분변수" element={ ... }/>

 

위와 같은 방법으로 사용한다.

/:~ 와 같은 형식으로 path를 작명한 뒤

/부모URL/임의path 를 입력하면 위의 정의된 element를 반환하는 것이다.

 

이때 파라미터는 여러개 지정할 수 있다.

/URL/:파라미터1/:파라미터2/ ...

 

 

예시

<Route path="/detail/:idx" element={<Detail/>}></Route>

 

detail/0, detail/1, ... 등으로 url을 구성할 수 있게 되었다.

 

하지만 여기까지만 진행을 한다면 url은 다르지만 element가 모두 같은 것을 반환할 것이다.

 

이를 구분해보자!

 

 

2. path별 구분하기 ( props 이용하기 & useParams )

 

path별로 구분하는 방법은 여러가지이다.

 

1) props 사용하기

element에 props를 활용하여 컴포넌트에 다른 데이터를 제공하는 방법도 이용할 수 있다.

 

예시

// App.js
...

{
  data.map(function(a,i) {
    const idx = i+1
    return(
    <Route path={"/detail/"+idx} element={<Detail data={data} i={i}/>}></Route>
    )
  })
}

...

 

//Detail.js
function Detail(props){
  const imgIdx = props.i+1
  return(
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img src={"https://codingapple1.github.io/shop/shoes"+imgIdx+".jpg"} width="100%" />
        </div>
        <div className="col-md-6">
          <div className="item-detail-container">
            <h4 className='item-detail-title'>{props.data[props.i].title}</h4>
            <p className='item-detail-price'>₩{props.data[props.i].price}</p>
            <p className='item-detail-content'>{props.data[props.i].content}</p>
            <button className="btn btn-danger">주문하기</button> 
          </div>
        </div>
      </div>
    </div> 
  )
}

export default Detail;

 

 

 

2) useParams()

useParams()라는 새로운 훅을 사용해보자.

유저가 URL 파라미터(/:~)에 입력한 정보를 가져올때 사용한다.

 

(1) import

import { useParams } from 'react-router-dom'

import 위치는 URL파라미터를 사용하여 접속할 페이지이다.

 

(2) 사용하기

<Route>의 path에 지정한 URL 파라미터를 그대로 이용하여야한다.

 

예시

//App.js

...
<Route path={"/detail/:idx"} element={<Detail data={data}/>}></Route>
...

<Route>에서 URL파라미터명을 idx로 지정하였다.

 

//Detail.js

import { useParams } from 'react-router-dom'

function Detail(props){
  // 지정한 URL파라미터명 그대로
  let {idx} = useParams();
  
  return(
   // ... (렌더링할 html)
  )
  
}

export default Detail;

URL파라미터를 사용한 path에 접속할 경우,
반환할 페이지에 useParams()를 import 한다.

 

이때 지정했던 파라미터명으로 식별하여 가져올 수 있다.

 

<Route>의 path 대로

idx는 detail/ 다음에 붙은 값을 가져오게 된다.

 

 

추가 Tip! ▼

[더 코드를 위해서!]

데이터에 접근을 할때 DB에 저장된 순서로 접근하는 방법도 있지만

id 등의 식별자를 이용해서 접근한 뒤 바인딩을 하게 된다면

sorting을 하는 등의 추가 기능을 구현할때에도 간편하다.

 

data = [
  {id:0, ...},
  {id:1, ...},
  ...
]

 이렇게 데이터에 식별자를 지정해 놓은 뒤

 

//Detail.js

import { useParams } from 'react-router-dom'

function Detail(props){
  let {idx} = useParams();
  
  // data sorting 해도 문제 없도록 데이터 바인딩 시 idx를 순서가 아닌 id로 일치시키기
  //find : 첫번째 요소 반환 / filter : 만족하는 요소 array로 반환
  let item = props.data.find((data)=> data.id == idx-1);
  // let item = props.data.filter((data)=> data.id == idx-1)[0];
  
  return(
   // ... (렌더링할 html)
  )
  
}

export default Detail;

array형태의 데이터일 경우 .find() 혹은 .filter() 등의 메소드를 활용하여 데이터id와 URL파라미터를 일치시켜 접근할 수 있다!