안녕하세요.
part 2 마지막에서 재고 숫자가 1씩 감소하는 부분을 따로 useState로 아래와 같이 작성했습니다.(질문을 위해서 간략히 올렸습니다)
코드 가장 하단의 컴포넌트 StockInfo 내부의 첫 번째 props.stock[props.idIdx]는 중괄호를 추가하니 오류가 생겼고, 두 번째 props.stock[props.idIdx]에는 중괄호를 빼니 오류가 생겼습니다.
어떤 때는 중괄호를 넣어야 하고 어떤 때는 중괄호를 넣지 말아야 하고 헷갈리는데요..
{}를 정확히 언제 언제 사용하는 지 알 수 있을까요?
function Detail(props) {
let { id } = useParams();
let [idIdx, setIdIdx] = useState(id);
return (
<div className="container">
<StockInfo stock={props.stock} idIdx={idIdx} /> //여기서 props.stock은 App.js에서 가져온 재고 useState입니다.
<button
className="btn btn-danger"
onClick={() => {
let copyStock = [...props.stock];
copyStock[id] -= 1;
props.setStock(copyStock);
}}
>주문하기</button>
</div>
)
}
function StockInfo(props) {
return (
<div>
{
props.stock[props.idIdx] > -1
? ( <p>재고 : {props.stock[props.idIdx]}</p> )
: ( <p>재고 없어용~</p>)
}
</div>
);
}
