useState를 활용한 유효성 검사

사진의 제목과 사진의 가격이 상태관리를 하는데 반드시 필요한 데이터 였기 때문에 유효성 검사가 필요했으며 유효성 검사 조건이 성립하는 경우에만 등록 버튼이 활성화 되도록 해야 했다. 입력한 결과 값에 따라 상태 변화를 감지하고 데이터값이 유효한지 판별해야 했기 때문에 useState를 사용했다.

//-----------오류 메시지 상태------------------------------------------------
  const [nameMessage, setNameMessage] = useState('')
  const [priceMessage, setPriceMessage] = useState('')

   //-----------유효성 검사----------------------------------------------------
  const [isName, setIsName] = useState(false)
  const [isPrice, setIsPrice] = useState(false)
  
   const onNameChange = (e:React.ChangeEvent<HTMLTextAreaElement>) => {
    setName(e.target.value)
    if (e.target.value.length < 2 || e.target.value.length > 20) {
      setNameMessage('2글자 이상 20글자 이하로 입력해주세요.')
      setIsName(false)
    } else {
      setNameMessage('올바른 이름 형식입니다 :)')
      setIsName(true)
    }
  }

onChange 이벤트를 활용하였고 그 값이 setName으로 상태를 변경 시키며 조건식을 통하여 길이값을 판별하고 setNameMessage를 통하여 상태메시지를 변경하도록 설정하였다.

  const onPriceChange = (e:React.ChangeEvent<HTMLTextAreaElement>) => {
    const priceVali =  /^[0-9]+$/
    const priceCurrent = e.target.value;
    setPrice(priceCurrent)
    if (!priceVali.test(priceCurrent)) {
      setPriceMessage('숫자만 입력해주세요')
    } else {
      setPriceMessage('올바른 형식입니다.')
      setIsPrice(true);
    }
  }

또한 RegExp.prototype.test()(이 test()메서드는 정규식과 지정된 문자열 간의 일치 항목에 대한 검색을 실행합니다. 반환 true또는 false.)을 사용하여 정규식을 판별하게 하고 정규식 조건에 성립 여부에 따라 setPriceMessage를 활용하여 상태를 변경해주었다.