Refactor
12/20 유효성 관련 에러 추가 발견
이메일 input창에 한글과 특수문자를 함께 작성하면 유효성 검사가 통과되는 문제
Today Task
•
React Hook 중 하나인 useForm을 사용하여 회원가입 기능 구현
Trouble
1.
에러 메시지를 출력하기 위해 errors.email.message 작성시 TypeError 발생
2.
submit 버튼 클릭 후 이메일 유효성 검증을 할 때, 에러 메시지 추가하기
3.
.env 파일을 수정해도 적용이 안 되는 문제 발생
→ env 파일을 수정할 시 npm start를 재실행 해야 적용됨!
⇒ 해결!
Trouble Shooting
1. errors 타입 에러 해결하기
// errors는 에러가 발생한 필드를 담고 있는 객체. 오류 메시지를 쉽게 검색 가능.
// errors {'email(내가 설정한 필드명)': {message: '(내가 설정한 에러 메시지)'}}
const { formState: { errors } = useForm();
// 이전 코드
<S.WarningText isVisible={!!errors.email}>{errors.email.message}</S.WarningText>
// 수정 후 코드
<S.WarningText isVisible={!!errors.email}>{errors.email?.message}</S.WarningText>
JavaScript
복사
•
email 필드에 에러가 발생하지 않은 경우, 해당 필드가 errors 객체에 추가되지 않음
→ 프로퍼티를 읽을 수 없기 때문에 TypeError 발생! 바보다 바보!
•
errors.email 을 ?. 을 사용하여 undefined 또는 에러 메시지가 출력 되도록 수정
(?.옵셔널 체이닝: errors.email?.message는 errors.email && errors.email.message을 의미)
⇒ 해결!
2. email 필드에 설정한 에러 메시지 외의 에러 메시지 추가하기
a.
useState를 사용하여 추가하기
→ useForm을 사용한 의미가 떨어지는 것 같아서 Pass
b.
email 필드에 validate 추가하기
→ validate key값에 콜백함수를 넣으면 되는데, 불필요하게 함수를 추가로 정의해야 하거나 return 문 내에서 콜백 함수를 길게 작성해야 하기 때문에 Pass
c.
useForm의 메서드인 setError() 사용하기
→ 하나 이상의 에러를 수동으로 설정 가능한 메서드로, handleSubmit 유효성 검사 후 사용자에게 에러 피드백을 제공하려는 경우 유용하게 사용 가능
(shouldFocus 는 setError의 옵션으로, 에러가 발생한 폼에 포커스)
⇒ 해결!
const { setError } = useForm();
setError('email', { message: `*${data.message}` }, { shouldFocus: true });
JavaScript
복사
Review
•
갸악 리액트를 사용해 처음으로 구현해본 기능!
•
처음에 { useState, useEffect }를 사용하다가, useState로 감시할 데이터 6개에 if조건문을 사용해 유효성 검증 몇 가지를 하려니 코드가 너무 길어지는 것 같았다.
→ 구글링 하며 useForm 훅 발견!
•
useForm 훅은 낯설었는데, 레퍼런스가 잘 정리되어 있어 큰 문제 없이 사용했다.
요상한 자신감이 올라가는 중.
•
트러블 슈팅 기록하는 거 쉽지 않다. 생각보다 오래 걸리는데, 내일부턴 에러가 발생하면 바로바로 메모해둬야겠다.
