210709 React Router(3)

Detail 컴포넌트에 데이터 바인딩하기

1. Detail 컴포넌트 태그 안에 넘겨줄 데이터를 선언하고

<Detail shoes={shoes}/>

2. detail.js(Detail 컴포넌트가 있는 곳)에서 props를 이용하여 데이터를 받아온다.

function Detail(props){
  let history = useHistory();
  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[0].title}</h4>
        <p>상품설명</p>
        <p>120000원</p>
        <button className="btn btn-danger">주문하기</button>
        <button className="btn btn-danger" onClick={()=>{history.goBack()}}>뒤로가기</button>
      </div>
    </div>
  </div>
  )
}

App.js 안에 shoes 데이터를 만들지 않고
detail.js 안에 shoes 데이터를 만들면 될 것 같다고 생각할 수 있다.
그러나 데이터는 되도록 상위컴포넌트에다 저장하는 것을 권장한다.

URL 파라미터로 페이지 여러개 만들기

요구사항: /detail/n이라고 접속하면 n번째 상품을 보여주세요! (n은 숫자)

 <Route path="/detail/:id">

:id :url의 파라미터 역할을 함
파라미터이므로 콜론 뒤에는 마음대로 작명 가능하며 여러개 사용가능하다.
쉽게 말하면, :id 자리에 아무 문자나 입력해도 Detail 컴포넌트를 보여준다.

각각 URL 접속 시 다른 상품을 보여주고 싶을 때는 useParams() 훅을 사용한다

useParams(): 현재 URL에 적힌 파라미터를 {파라미터1, 파라미터2} 이런 식으로 저장해주는 함수

function Detail(props){
  let history = useHistory();
  let { id } = useParams();  //이렇게 받아옴
  return(
    <div className="container">
    <div className="row">
      <div className="col-md-6">
      <img src={'https://codingapple1.github.io/shop/shoes' + (Number(id)+1) + '.jpg'} width="100%" />
      </div>
      <div className="col-md-6 mt-4">
        <h4 className="pt-5">{props.shoes[id].title}</h4>
        <p>{props.shoes[id].content}</p>
        <p>{props.shoes[id].price}</p>
        <button className="btn btn-danger">주문하기</button>
        <button className="btn btn-danger" onClick={()=>{history.goBack()}}>뒤로가기</button>
      </div>
    </div>
  </div>
  )
}

++ 사진도 다 다르게 띄우고 싶어서 수정해봤다. 그냥 id+1이라고 했더니 계속 오류가 나서 혹시 id를 문자로 받고 있어서 정수 연산이 안되는건가 싶어 Number()이용해 정수로 바꿔봤더니 됨

훅이란 뭔지 알아보기

그러나 문제: shoes 데이터의 순서가 바뀐다면 상세페이지도 이상해짐
-> 상품의 영구번호 (지정해둔 id)를 활용하자
실제 개발할 땐 그냥 서버에 id:0인 상품데이터를 ajax로 요청한다

import React from 'react';
import { useHistory, useParams } from 'react-router-dom';

function Detail(props){

  let { id } = useParams();
  let 찾은상품 = props.shoes.find(function(상품){
    return 상품.id == id
  });
//콜백함수를 이용해서 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">{찾은상품.title}</h4>
          <p>{찾은상품.content}</p>
          <p>{찾은상품.price}원</p>
          <button className="btn btn-danger">주문하기</button> 
        </div>
      </div>
  </div>  
  )
};

export default Detail