[React] react hook form으로 리팩토링

기존 form 구현 방식과 문제점

리렌더링 방지를 위한 useRef

✅구현 방식 : 로그인, 회원가입, 상품 등록 페이지 등에 들어가는 모든 input에 useRef를 이용하여 별도의 ref를 설정하였다.

✅구현 의도 : 각 input을 state로 관리하게 되면 불필요한 리렌더링이 발생하므로, 이를 방지하기 위함이다.

✅문제점

1. 유지보수의 어려움
   : 각 input 필드마다 ref를 생성해서 관리해야하다 보니 반복되는 코드가 많고 코드의 양이 증가했다.

2. 유효성 검사의 번거로움
   : useRef로 사용한 것과는 별개의 문제이긴 하나, 각 필드마다 유효성 검사 로직을 직접 구현하다보니 코드가 매우 길어지고 복잡해졌다.

react hook form을 사용해보니

내가 느낀 장점

1. 친절한 공식문서
: 공식문서가 매우 친절하고 가독성이 좋아 이해가 쉽다. 거기에 튜토리얼 영상까지 있어 이해가 잘 안가는 부분은 영상을 통해 쉽게 배울 수 있었다. 또한, codesandbox에서 직접 코드를 작성해보며 사용법을 익힐 수 있다.

2. 쉬운 사용 방법
: react hook form의 핵심은 register함수이다. register 함수에 input의 이름을 등록해주기만 하면 된다. 그리고 이 register함수에는 다양한 옵션을 전달할 수 있는데 required, minLength, maxLength, min, max, pattern, validate 등을 전달하여 유효성 검사와 에러 메세지 등을 쉽게 설정할 수 있다.

<S.InputLabel htmlFor={'userName'}>사용자 이름</S.InputLabel>
<S.Input
    id={'userName'}
    placeholder={'2~10자 이내여야 합니다.'}
    {...register('userName', {
        required: '필수 정보를 입력하세요.',
        minLength: {
            value: 2,
            message: '2~10자 이내여야 합니다.',
        },
        maxLength: {
            value: 10,
            message: '2~10자 이내여야 합니다.',
        },
    })}
/>

리팩토링 후 개선점

1. 리렌더링을 방지하고자 하는 본래의 목적을 유지
: 공식 문서에 따르면 react hook form은 ref를 사용한 비제어 컴포넌트를 기반으로 리렌더링을 줄이는 방식으로 작동한다. 기존의 구현 의도를 그대로 유지하면서도 더욱 간편하고 효과적으로 form을 관리할 수 있게 되었다.

2. 간편한 유효성 검사와 에러 처리
: 아래 이미지에서 왼편이 기존 코드, 오른쪽이 react hook form으로 리팩토링한 결과이다. 코드의 양이 눈에 띄게 줄어든 것을 확인할 수 있다. 앞서 언급했지만 register 함수에 옵션으로 패턴, 조건, 에러메세지를 등록해놓으면 되기 때문에 코드가 매우 간결해진다.