React useState() 회고

문제상황

사용자가 저장한 즉시 구매가를 상수 값처럼 사용하기 위해 useState(110000) (임시값)을 입력해서 다음과 같이 사용했음.

입찰하기 모달 아니고 즉시구매 모달의 아이템 현재 정보임

모달창 내부에서는 다음과 같이 사용했음.

모달창 내부코드

 

아이템 정보의 buyNowPrice 와 buyNowpurchaseFee 부분에 일반 상수 값(숫자)을 넣었을 때는 제대로 나오던 코드인데,

useState를 사용하니 다음과 같이 화면에 의도하지 않은 값이 나타남.

 

 

원하던 결과 값은 다음 코드와 같이 useState를 사용해서 코드의 가독성을 높이기 위함 이었는데,

  // 희망 입찰가 상태 관리
  const [bidAmount, setBidAmount] = useState(63000);  // 초기값 설정
  // 입찰가 증가 함수
  const increaseBid = () => {
    setBidAmount((prevBid) => prevBid + 1000);  // +1000
  };
  // 입찰가 감소 함수
  const decreaseBid = () => {
    setBidAmount((prevBid) => Math.max(prevBid - 1000, 0));  // -1000, 최소값은 0
  };


  // 입찰하기 모달창
  const [biddingNowModalOpen, setBiddingNowModalOpen] = useState(false);
  const openBiddingNowModal = () => {
    setBiddingNowModalOpen(true);
  };
  const closeBiddingNowModal = () => {
    setBiddingNowModalOpen(false);
  };
  // 입찰하기 모달의 아이템 현재 정보
  const nowBiddingInfo = {
    name: "Classibot (iBoy)",
    category: "일반경매 입찰",
    bidPrice: bidAmount,
    purchaseFee: (bidAmount / 10), // 구매 수수료 는 구매가의 10퍼센트
  };
  const totalPrice = nowBiddingInfo.bidPrice + nowBiddingInfo.purchaseFee;

하나의 값만 사용할 거라 두 번째 배열의 인자를 안적어 주었음.

 

화면에 나온 값 중 NaN을 보니 useState(110000) 로 설정한 setBuyNowPrice 와 / 10 연산 에서의 오류로 추측했었음.

 

해결방안

단순히

const setBuyNowPrice = useState(110000); 로 선언해서 사용할 수 있을 줄 알았지만,

위와 같은 선언은 useState 배열의 첫 번째 요소인 상태 값 만 선언한 것이고,

두 번째 요소인 업데이트 함수를 선언하지 않은 것이다.

올바른 사용법은 useState 에서 반환 된 배열의 구조 분해 할당을 통해 사용해야 된다.

우선 선언문은 다음과 같이 작성해 주며,

const [buyNowPrice, setBuyNowPrice] = useState(110000);

업데이트 함수를 사용하지 않으면 된다. → 선언부 만 변경해줌. 이외 변경사항 없음.

 

변경한 코드 :

  // 즉시구매가 설정
  const [buyNowPrice, setBuyNowPrice] = useState(110000);
  // 즉시구매 모달창
  const [buyingNowModalOpen, setBuyingNowModalOpen] = useState(false);
  const openBuyingNowModal = () => {
    setBuyingNowModalOpen(true);
  };
  const closeBuyingNowModal = () => {
    setBuyingNowModalOpen(false);
  };
  // 즉시구매 모달의 아이템 현재 정보
  const nowBuyingInfo = {
    name: "Classibot (iBoy)",
    category: "즉시 구매",
    buyNowPrice: buyNowPrice,
    buyNowpurchaseFee: (buyNowPrice / 10),
  };
  const paymentAccount = nowBuyingInfo.buyNowPrice + nowBuyingInfo.buyNowpurchaseFee;

 

이후 수정을 적용한 결과를 보면,

 

의도치 않게 useState에서 부족한 부분을 찾아 더 공부할 수 있었다~_~