React - URL 파라미터, 다른js파일컴포넌트

다른 js파일의 컴포넌트 가져오기

디렉터리 구조가 다음과 같다고 가정한다.

• root
  • App.js
  • Detail.js (Detail 컴포넌트 선언)

1. 우선 Detail.js에서 Detail 컴포넌트를 export 시킨다.( export default Detail )

2. App.js에서 상단에서 import 해오고 가져와서 사용한다( import Detail from './Detail' )

 

 

상세페이지에 상품명넣기

현재 상세페이지에 임시글자만 보입니다. 그래서 shoes라는 state에 있던 상품정보들을

Detail 컴포넌트에 꽂아넣어봅시다. 근데 shoes는 App 컴포넌트에 있으니 App -> Detail 전송해야합니다.

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

그래서 App.js 안에 <Detail> 쓰는 곳에서 일단 props 전송하고 

Detail 컴포넌트는 props 파라미터 등록해서 shoes를 사용합니다. 

(Detail.js)
<div className="container>
  <div className="row">
    <div className="col-md-6">
      <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
    </div>
    <div className="col-md-6 mt-4">
      <h4 className="pt-5">{props.shoes[0].title}</h4>
      <p>{props.shoes[0].content}</p>
      <p>{props.shoes[0].price}원</p>
      <button className="btn btn-danger">주문하기</button>
    </div>
  </div> 
</div>

 

상세페이지 여러개

방금 만든건 0번 상품의 상세페이지 입니다. 상품이 3개니까 상세페이지도 3개가필요합니다.

<Route> 쓰면 페이지 하나 만들 수 있으니까 라우트 3개를 만들면 되지 않을까? 라는생각을 할 수 있습니다.

<Route path="/detail/0" element={ <Detail shoes={shoes}/> }/>
<Route path="/detail/1" element={ <Detail shoes={shoes}/> }/>
<Route path="/detail/2" element={ <Detail shoes={shoes}/> }/>

근데 상품이 100개라면? 100개를 만들어야 합니다. 

이럴때 URL 파라미터라는 문법을 사용가능합니다. 

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

path 작명할 때 /: 이렇게 사용하면 "아무 문자"를 뜻합니다. 

그래서 위의 <Route>는 누군가 주소창에 /detail/아무거나 입력했을 때 <Detail>컴포넌트 보여달라는 뜻입니다. 

이제 그럼 /detail/0 , /detail/1 , /detail/2 이렇게 접속해도 <Detail>컴포넌트 잘 보여줄 수 있습니다. 

 

 

url파라미터

페이지를 여러개 만들어놨지만 접속해보면 똑같은 0번째 상품만 보여주고 있습니다. 

(Detail.js)

<h4 className="pt-5">{props.shoes[현재url에입력된숫자].title}</h4>
<p>{props.shoes[0].content}</p>
<p>{props.shoes[0].price}원</p>
<button className="btn btn-danger">주문하기</button>

0이라고 하드코딩해놨던 자리에 현재 url파라미터에 입력된 숫자를 넣는겁니다. 

저런 숫자를 가져올 수 있을까요? 가져올 수 있습니다.

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

function Detail(props){
  let {id} = useParams();
  console.log(id)
  
  return (
    <div className="container>
      <div className="row">
        <div className="col-md-6">
          <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
        </div>
        <div className="col-md-6 mt-4">
        <h4 className="pt-5">{props.shoes[id].title}</h4>
        <p>{props.shoes[0].content}</p>
        <p>{props.shoes[0].price}원</p>
        <button className="btn btn-danger">주문하기</button>
      </div>
    </div>
  </div>
  )
}

useParams()라는 함수를 상단에서 import 해오면 쓸 수 있습니다. 

이거 쓰면 현재 /:url파라미터 자리에 유저가 입력한 값을 가져올 수 있습니다. 

변수에 저장해서 쓰면됩니다. 

 

그래서 위처럼 사용하면 

/detail/1로 접속하면 id라는 변수에 1이 들어옵니다. 

/detail/2로 접속하면 id라는 변수에 2가 들어옵니다. 

콘솔로 확인해보겠습니다.