React :: shopping site 만들기 04

상세 페이지 만들기

import React, {useEffect} from 'react'

const ProductDetail = () => {
  const getProductDetail = () => {
    
  }
  useEffect(()=>{
    getProductDetail()
  },[])
  return (
    <div></div>
  )
}

export default ProductDetail

 

디테일 페이지 url 끝에 오는 id 값을 추출하기 위해 usePrams 를 사용한다

let url = (`http://localhost:5000/products/${id}`)

 

 

 

ProductDetail.js

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

const ProductDetail = () => {
  let {id} = useParams();
  const getProductDetail = async() => {
    let url = (`http://localhost:5000/products/${id}`)
    let response = await fetch(url) //url을 fetch 해준다
    let data = await response.json()
    console.log("데이터 잘 들어왔는지?" ,data);
  }
  useEffect(()=>{
    getProductDetail()
  },[])
  return (
    <div></div>
  )
}

export default ProductDetail

 

 

 

 

이제 이 데이터를 관리할 useState를 만들어 준다

const [product, setProduct] = useState(null);

초기값 null 

 

setProduct(data);

product 값을 setProduct로 수정해준다

 

 

 

  return (
    <Container>
      <Row>
        <Col><img src={product?.img}></img></Col>
        <Col></Col>
      </Row>
    </Container>
  )

삼항연산자를 이용해서 product의 img를 불러와준다

 

 

 

 

 <Dropdown.Menu>
  <Dropdown.Item href="#/action-1">{product?.size.length > 0 && product.size.map((item)=>(<Dropdown.Item href="#/action-1">{item}</Dropdown.Item>))}</Dropdown.Item>
</Dropdown.Menu>

부트스트랩에 있던 코드 그대로 쓰니까 사이즈가 전부 선택 되어서 다시 코드 수정

 

<Dropdown.Item href="#/action-1"> 이 부분을 지워준다

  return (
    <Container>
      <Row>
        <Col className='product-img'><img src={product?.img}></img></Col>
        <Col>
          <div>{product?.title}</div>
          <div>₩{product?.price}</div>
          <Dropdown>
            <Dropdown.Toggle variant="success" id="dropdown-basic">
              size choice
            </Dropdown.Toggle>
            <Dropdown.Menu>
              {product?.size.length > 0 && product.size.map((item)=>(<Dropdown.Item href="#/action-1">{item}</Dropdown.Item>))}
            </Dropdown.Menu>
          </Dropdown>
          <div className='card-conscious-choice'>{product?.choice == true ? "Conscious choice" : <br></br>}</div>
          <div className='card-new-item'>{product?.new === true ? "신제품" : <br></br>}</div>
        </Col>
      </Row>
    </Container>
  )
}

 

 

이제 사이즈 별로 선택이 가능하다