[TIL] 내일배움캠프 React 과정 2023.01.29

Today I Learned

• 소식지 구독에 유효성 검사 추가하기
• 발표 자료 정리

---

소식지 구독 시 유효성 검사

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    const emailRegex = /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/g;

    if (subscriberEmail.match(emailRegex) === null) {
      e.preventDefault();
      alert('이메일을 형식에 맞게 입력해주세요.');
    } else { ... }
}

<S.BTNSubscribeSubmit
    type="submit"
    disabled={subscriberName && subscriberEmail ? false : true}
    onClick={() => setSubmitTime(new Date().toLocaleString())}
>

이메일 형식만 alert으로 띄우고 input 자체 유효성 검사는 버튼 태그에 disabled 요소를 추가했다.

 

---

회고

오늘도 참 한 게 없는 거 같다.. 발표 자료 정리하고 소식지 구독에 유효성 검사 추가한 거? 그리고 방 구조를 좀 바꿨다. 책상을 좀 넓게 쓰고 싶어서 한 선택이었는데 덕분에 침대가 방 한가운데에 위치하게 되었다 ㅎㅎ이게 맞는 건가..?