useForm hook 을 사용해보자

현재 진행하는 개인 프로젝트인 오픈 마켓에서 회원가입 부분의 유효성 검사 및 form관리를 보다 원활하게 하기 위해서 useForm을 사용해보기로 하였다.

처음에 그냥 다른 분들이 사용하신 예시 코드를 보고 무작정 따라해봤는데 당연히 이해가 너무 부족해 에러의 늪에 빠졌었다.

 

우선, 내게 필요한 부분이 무엇인지 파악하여 해당 내용을 찾아보려고 했다.

✅ 유효성 검사

✅ requried

✅ form에 에러가 있는 상태 & form에 아무런 에러도 없는 상태

✅ 유효성 검사는 어느 시점에 행해질건지 ( 나는 onBlur 상황에 행해지길 원했다)

등등 이 있었다.

 

자 그럼 이렇게 알아두고 본격적으로 필요한 부분만 공식 사이트에서 찾아서 해보자!

---

1. 우선 react-hook-form을 깔아준다.

npm install react-hook-form

 

2. 사용할 컴포넌트에서 불러온다.

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

3. 이제 useForm에서 어떤 기능을 사용할 것인지 선언 해줘야한다.

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

input의 이름을 지정하고 유효성 검사규칙을 적용할 수 있는 register,

그리고 에러 상태일 때는 에러 메세지를 나타내고, 유효한 상태일 때는 서버에 전송할 수 있도록 form의 erorrs, isValid 상태를 추적할 것이다.

props로 mode: onBlur를 사용하면 onBlur 이벤트에서 유효성 검사가 트리거되도록 한다.

 

4. 이제 input에 적용을 시켜줘야 한다.

<IdTextInputBox
value={userName}
accountValid={accountValid}
errors={errors}
register={register}
handleInput={handleInput}
/>

우선, 나는 input 컴포넌트를 가져와서 쓰고 있기 때문에 register를 넘겨준다.

 

이제 해당 컴포넌트로 가서

        <PasswordInput
          type="password"
          id="password_text_input"
          value={value}
          marginB="12px"
          {...register('password', {
            required: '필수 정보입니다.',
            pattern: {
              value: /^(?=.*[a-zA-Z])((?=.*\d)(?=.*\W)).{8,}$/,
              message: '8자 이상, 영문 대 소문자, 숫자, 특수문자를 사용하세요.',
            },
            onChange: (e) => {
              handleInput(e);
            },
          })}
        />

작성해준다!

required: '필수 정보입니다.', 필수 작성 요소이고 충족하지 않았을 때의 오류 메세지

            pattern: {

              value: /^(?=.*[a-zA-Z])((?=.*\d)(?=.*\W)).{8,}$/,

              message: '8자 이상, 영문 대 소문자, 숫자, 특수문자를 사용하세요.',

            },

유효성 검사 패턴과 오류 메세지

 

            onChange: (e) => {

              handleInput(e);

            },

해당 컴포넌트가 onChange일 때 작동하는 이벤트 (useState에 변경된 값을 넣어주는 함수임)

 

5. 오류 메세지를 한번 나타내볼까?

      {errors.password2 && (
        <ValidMessage color="red">{errors.password2.message}</ValidMessage>
      )}

 오류 메세지를 넣고 싶은 부분에 작성을 해준다.

 

console.log(errors)를 사용해보면 어떤 식으로 접근해서 사용해야할지 감이 더 잘온다.

 

6. (부수적인 부분) 오류가 없고, 개인정보 동의에 체크를 한 경우만 버튼이 활성화 되게 하고 싶은데...

 

        {(joinType === 'BUYER' && checked && doubleCheck && isValid) ||
        (joinType === 'SELLER' && checked && doubleCheck && companyNumCheck) ? (
          <>
            <MButton value="가입하기" wd="480px" />
          </>
        ) : (
          <>
            <MDisabledButton value="가입하기" />
          </>
        )}

이렇게 다른 조건과 함께 오류가 isVaild 유효한 상태 즉 에러가 없는 상태까지 넣어주면 된다.

---

혹시 틀린 부분이 있다면 언제든 말씀해주세요 :) 👍👍

 

출처

https://react-hook-form.com/api/useform/