[TIL] 최종 프로젝트 4주 차_수요일

2023.03.01.(수)

TIL Today I Learned
해당 깃허브

---

Good: 빨간 날인데 열심히 프로젝트 만드는데 참여하였다.
Bad:

---

[ 최종 프로젝트 useForm 이용]

//useForm 적극 이용 전
const Auth = (props: Props): JSX.Element => {
  const [authenticating, setAuthenticating] = useState<boolean>(false);
  const [email, setEmail] = useState<string>('');
  const [password, setPassword] = useState<string>('');
  const [error, setError] = useState<string>('');
  // const [isRemember, setIsRemember] = useState<boolean>(false);

  const {
    register,
    formState: { errors },
  } = useForm<AuthForm>({ mode: 'onBlur' });

  const onClickLoginHandler = async (e: FormEvent) => {
    e.preventDefault();
    if (error !== '') setError('');

    setAuthenticating(true);
    await signInWithEmailAndPassword(authService, email, password)
      .then((res) => {
        customAlert('로그인에 성공하였습니다!');
        props.closeLoginModal();
      })
      .catch(() => {
        alert('로그인 실패, 다시 입력해주세요');
        setAuthenticating(false);
        setError('Failed Login');
      });
  };

//useForm 적용
   const [authenticating, setAuthenticating] = useState<boolean>(false);
  const [hidePassword, setHidePassword] = useState<boolean>(false);
  const [isRemember, setIsRemember] = useState<boolean>(false);

 const {
    register,
    setValue,
    handleSubmit,
    setError,
    formState: { errors },
  } = useForm<AuthForm>({ mode: 'onBlur' });

  const onClickLoginHandler = async (data: AuthForm) => {
    // if (error !== '') setError('');

    setAuthenticating(true);
    await signInWithEmailAndPassword(authService, data.email, data.password)
      .then((res) => {
        customAlert('로그인에 성공하였습니다!');
        props.closeLoginModal();
      })
      .catch(() => {
        setError('password', {
          type: 'invalid',
          message: '비밀번호를 잘못 입력하셨어요',
        });
        setAuthenticating(false);
        // setError('Failed Login');
      });
  };

---

[공부1]

• useState 보다 useForm을 이용하는 이유

  useState와 useForm은 둘 다 React에서 상태(state)를 관리하는 훅(hook)이다. 그러나 useState는 기본적으로 하나의 input element에 대한 상태만 다루며, 여러 개의 input element를 다루기 위해서는 각각의 input element에 대한 state를 모두 만들어야 한다.

반면에 useForm은 React Hook Form 라이브러리에서 제공하는 훅으로, 여러 개의 input element를 관리하기에 용이한다. useForm은 하나의 hook으로 모든 input element의 상태, 유효성 검사(validation), 에러 메시지 처리 등을 한번에 다룰 수 있다. 또한, useState보다 더욱 성능이 우수하다고 알려져 있다.

또한, useForm은 커스터마이징 가능한 다양한 옵션과 기능을 제공한다. 예를 들어, 필드 유효성 검사를 위한 다양한 검증 규칙(validation rules)을 쉽게 설정하고, 조건부 필드를 쉽게 구현할 수 있다.

따라서, 여러 개의 input element를 다루거나, 다양한 옵션과 기능을 활용하고자 할 때, useForm을 사용하는 것이 더욱 편리하고 효율적일 수 있다.

[ 18주 차 계획 ]

- 스파르타코딩클럽 계획

✔ 월: 최종 프로젝트

✔ 화: 최종 프로젝트

✔ 수: 최종 프로젝트

□ 목: 최종 프로젝트

□ 금: 최종 프로젝트

​

- 나의 계획

✔
□