[React] react-hook-form

도입 계기

로그인 폼과는 달리 회원정보를 입력하는 회원가입 폼에서는 더 많은 입력 필드가 있습니다. 사용자의 입력을 받는 여러 입력 필드가 변경될 때마다 전체 컴포넌트가 리렌더링되는 문제가 발생하고 있었습니다. 입력 필드가 많을수록 이는 성능 문제를 야기할 수 있습니다. 이러한 문제를 해결하기 위해 react-hook-form을 도입하였는데 react-hook-form은 입력 필드의 상태를 직접 관리하고 있어 입력 값이 변경되어도 전체 컴포넌트가 다시 렌더링되지 않습니다. 리렌더링 이슈만을 고려한다면 꼭 react-hook-form을 사용하지않고 useRef를 활용하는 방법도 있지만 유효성 검사를 진행하는 부분이 많다는 점에서 react-hook-form을 사용하게 되었습니다. 그리고 formik과 비교해서 react-hook-form은 가볍고 빠르며 지속적인 업데이트가 이루어진다는 점에서 최종적으로 선정하게 되었습니다.

react-hook-form 알아보기

useForm

useForm 훅은 폼을 관리하기 위한 주요 훅입니다. 이를 사용하여 폼의 상태와 유효성 검사를 관리할 수 있습니다.

register

register 함수를 사용하여 입력 요소를 폼에 등록합니다. 입력 요소를 추적하고 값을 검증할 수 있도록 합니다.

handleSubmit

handleSubmit 함수는 제출 이벤트를 처리합니다. 이 함수를 폼의 onSubmit 핸들러로 전달하여 제출 이벤트를 처리할 수 있습니다.

errors

errors 객체는 각 입력 요소의 유효성 검사 오류를 포함합니다. 이를 사용하여 사용자에게 오류 메시지를 표시하거나 폼의 상태를 변경할 수 있습니다.

적용 코드

 <form onSubmit={handleSubmit(onSubmit)}>
      <Input
        label='이메일'
        id='email'
        type='email'
        placeHolder='이메일 주소를 입력해주세요'
        isError={errors.email?.message}
        errorMsg={errors.email?.message}
        {...emailController.field}
      />
      <Input
        label='비밀번호'
        id='password'
        type='password'
        placeHolder='비밀번호를 입력해주세요'
        isError={errors.password?.message || isError}
        errorMsg={errors.password?.message || isError && message}
        {...passwordController.field}
      />
      <Button
        type='submit'
        size='L'
        text='로그인'
        isDisabled={!getValues('email') || !getValues('password')}
      />
    </form>

form 요소는 React Hook Form에서 제공하는 handleSubmit 함수를 사용하여 제출 이벤트를 처리합니다. 이 함수는 실제로 폼이 제출될 때 실행될 함수인 onSubmit을 호출합니다.

Input 컴포넌트는 사용자의 입력을 받는 입력 필드를 나타냅니다. 이메일과 비밀번호 입력 필드가 있으며, 각 입력 필드는 label, id, type, placeHolder 등의 props를 받습니다. isError와 errorMsg props는 유효성 검사 오류가 발생했을 때 표시할 오류 여부와 메시지를 설정합니다. 이러한 입력 필드들은 React Hook Form의 Controller 컴포넌트와 연결되어 해당 필드의 값을 관리하고 유효성 검사를 수행합니다.