React / useState 로 count 만들기

상품상세 페이지 만드는 도중 수량체크하는걸 만들어보았다.

useState 사용예제로 흔한 카운트버튼을 만들어 보았다.

이제 장바구니 찜하기 구매하기까지 공부해 봐야겠다.

 

수량체크여서 0이 되지 않게끔 조건을 걸어주었다.

import React, { useState } from 'react';
import detail from '../assets/css/sub/product.module.css';

export default function ItemDetailPage() {
  const [number, setNumber] = useState(1);
 
  const increase = () => {
    setNumber(number + 1);
  }
  const decrease = () => {
    if(number > 1 ){
      setNumber(number - 1);
    }
  }
  
    return (
		<>
   		   <div className={detail.count}>
   		      <span>{number}</span>
   		      <div className={detail.count_btn}>
   		        <button onClick={increase}></button>
   		        <button onClick={decrease}></button>
   		      </div>
   		   </div>
       </>
    )