Hoeun Wang - Blog

어제 react-hook-form에 관하여 공식문서를 보고 조금 더 공부하다가 useForm에서의 onChange모드를 발견하게 되어 이를 활용해 회원정보 제출페이지를 제작해보기로 결심하였다.

먼저 설명에 앞서 나의 프로젝트 컴포넌트들의 구조를 간단히 설명해보자면, 

react-router-dom에서 Route태그를 활용해 입력받아야하는 정보들별로 페이지를 구분하였고, 이를 상위컴포넌트에서 한번에 호출하여 관리하고 있다.

이러한 환경속에서 공통적으로 쓰이게 되는 hook들은 상위컴포넌트에 선언해주었고, useForm 또한 상위 컴포넌트에 선언해주었다.

const {
   register
  } = useForm({
    mode: 'onChange',
  });

이렇게 onChange모드로 설정해주면, 실시간 유효성 검사가 가능하므로, register함수안에 입력되고 있는 정보가 어떠한 조건으로 인하여 만족하지 않는다면 오류 message를 보이게 할 수 있었다.

<input
        {...register('nickname', {
          minLength: {
            value: 2,
            message: '닉네임을 입력해주세요',
          },
          required: true,
        })}
        type="text"
        placeholder="nickname"
      />
      <span>{errors?.nickname?.message}</span>

나는 다음과 같이 register 함수의 기능중 하나인 minLength를 사용하여 자리수 제한을 주었고, 자리수 제한에 도달하지 못했을 때 message를 출력할 수 있게 해주었다. (이 과정에서 상위컴포넌트에 stateForm:{errors}를 useForm안에 선언해주어야한다.)

에러메세지를 도출하는 과정은 onChange모드로 해결이 됐지만, 나는 에러메세지를 보고도 무시하고 다음으로 넘어가는 경우들을 위해 버튼을 비활성화 하는 과정 또한 필요하다고 생각했다. 

react-hook-form에 관하여 좀 더 찾아보던 중, getFieldState 라는것을 발견하게 됐는데, 이 기능은 register함수에서의 상태 값을 실시간으로 불러 올 수 있는 역할을 제공해주었다. 공식문서에서의 설명을 좀 더 보충하자면 nested field에서 활용하기에 유용하다고 한다.

나는 getFieldState를 활용하는 방법은 다음과 같다.

const {
    getFieldState,
    register,
    formState,
    formState: { errors },
    handleSubmit,
  } = useForm({
    mode: 'onChange',
    defaultValues: {},
  });

먼저 getFieldState와 formState를 상위컴포넌트에 선언해준 후(모든 공유하는 값들은 props로 전달.) 

getFieldState('nickname', formState);
const fieldState = getFieldState('nickname');

이렇게 formState와 register함수에 선언된 'nickname'을 함께 getFieldState로 하위컴포넌트에 선언해 주었다.

그럼 getFieldState가 어떤 state값들을 받아오는지 확인하기 위해 먼저 fieldState를 console창에 찍어보자.

위와 같이 invalid, isDirty, isTouched 이렇게 3개의 값과 error까지 확인 할 수 있었고 나는 input창에 값을 입력했을때 버튼이 활성화 되게 하고싶었기 때문에 isDirty를 활용하면 되겠다고 생각했다.

나는 fieldState.isDirty의 값이 false일때 button을 disabled=true 시켜주었고, 만약 true 라면 disabled= false로 변경해주어 버튼이 다시 원래대로 작동 되게 코드를 짜보았다.

getFieldState를 활용하면 이렇게 실시간 register 함수의 값을 다룰 수 있었고, 그에 따른 기능도 부여해 줄 수 있었다.


아직 react-hook-form에 대해서 완벽히 숙지했다고 판단하지 않아, 추후에 useContext 기능도 함께 사용해보고 방금 사용한 getFieldState도 복습하며 좀 더 완벽히 알았을 때 전체적인 코드와 함께 정리글을 한번 더 올려야겠다고 생각했다.