import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import React from "react";
function Detail(props) {
let [count, setCount] = useState(0)
let {id} = useParams();
let 찾은상품 = props.shoes.find(function(x){
return x.id == id
});
let [alter, setAlter] = useState(true)
<span style="color: #993300;"> useEffect(()=>{</span>
<span style="color: #993300;"> setTimeout(()=>{setAlter(false)},2000)</span>
<span style="color: #993300;"> console.log(1)</span>
<span style="color: #993300;"> },[count])</span>
return(
<div>
<div className="container">
<Hide alter={alter}></Hide>
{count}
<button onClick={()=>{setCount(count+1)}}>버튼</button>
<div className="row">
<div className="col-md-6">
< img src={찾은상품.img } alt="shoes" width="100%" />
</div>
<div className="col-md-6">
<h4 className="pt-5">{찾은상품.title}</h4>
<p>{찾은상품.content}</p>
<p>{찾은상품.price}</p>
<button className="btn btn-danger">주문하기</button>
</div>
</div>
</div>
</div>
)
}
function Hide(props){
return(
props.alter == true ?
<div className="detail-event">2초이내 구매시 할인</div>
: null
)
}
export default Detail;
count변수에 state가 변경 될 때마다 위에 있는 코드를 실행 시켜준다고 했는데,
count해도 div박스는 새로 나타나지 않는 이유가 뭔가요?
Hide라는 컴포넌트를 나타내는 코드가 들어있지 않아서 맞나요?
