react-hook-form으로 유효성 검사

1. react-hook-form

react-hook-form을 통해 1자 이상 입력한 경우에만 등록 버튼을 활성화하도록 하자.

만약 공백을 제거했을 때도 공백이면 버튼을 비활성화 되도록 설정하자. 보통 react-hook-form은 보통 form의
검증이 많거나 많은 input을 가질 때 유효성 검사를 하는
편이다. 내가 쓴 경우는 input이 하나 뿐이지만 react-hook-form을 써보고 싶어서 써보았다.

1.1 react-hook-form 설치

npm install react-hook-form
yarn add react-hook-form

1.2 register 함수

onChange(이벤트 핸들러)로 setState 기능을 한다.

타입스크립트에서 useForm을 이용할 때 form 안에
사용할 데이터 이름과 데이터 타입을 명시해준다.

예를 들어, form 안에 있는 textarea 안에 입력한 값이
변할 때 마다 입력 상태 값을 바로바로 업데이트 해준다.
이때 useForm에서 명시한 데이터 이름을 통해 업데이트해줄 수 있다.

1.3 handleSubmit 함수

입력값 검증을 한다.

• { required:true }를 통해 필수여부를 체크한다.

import { useForm, SubmitHandler } from 'react-hook-form';

type Comment = { content: string }; //데이터 명시

export default function AddComment({ commentCount }: { commentCount: number }) {
  const {
    register,
    handleSubmit,
    formState: { isValid },
    reset
  } = useForm<Comment>();


  const onSubmit: SubmitHandler<Comment> = (data) => {
    reset();
    if (!user) {
      Swal.fire({ icon: 'warning', title: '로그인 후 댓글을 입력하세요!' });
      return;
    }
    Swal.fire({ icon: 'success', title: '댓글 등록이 완료되었습니다' });
    
    const newComment = {
      cid: uuidv4(),
      psid: id,
      content: data.content,
      displayName: user?.displayName as string,
      photoUrl: user?.photoURL as string,
      createdAt: Timestamp.now()
    };
    addCommentMutation.mutate(newComment);
  };

  return (
    <>
      <h3 className={styles.h3}>
        댓글
        <span> {commentCount}</span>
      </h3>
      <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
        <div className={styles.commentBox}>
          <div className={styles.userComment}>
            <img
              src={
                user?.photoURL
                  ? user.photoURL
                  : '기본 이미지'
              }
              alt="avatar"
            />
            <textarea
              placeholder="댓글을 남겨보세요."
              {...register('content', {
                required: true,
                validate: (value) => (value.trim().length >= 1 ? true : false)
              })}
            />
          </div>
          <button disabled={!isValid}>등록</button>
        </div>
      </form>
    </>
  );
}

https://cocococo.tistory.com/entry/React-React-Hook-Form