프로젝트에서 구현한 회원가입 폼이 있었는데, 상태 의존성으로 인한 리렌더링을 메모이제이션 기법으로 개선한 적이 있었습니다.

그런데 어느 기술 블로그에서 React Hook Form의 장점을 소개하는 글을 보았습니다.

거기에 렌더링 최적화 효과까지 있다고 하더군요.

게다가 Zod와 함께 사용하면 더욱 좋아진다는 내용을 보고 직접 개선해 보았습니다. 그 변환 과정을 여러분과 공유하고자 합니다.

개선 미리보기

<CommonInput
					placeholder="닉네임"
					icon="aliens-line"
					value={nickName}
					onChange={useCallback(val => validateField('nickName', val), [validateField])} />
<WarningMessage
					message="특수문자 제외 3자리 이상이여야 합니다."
					isSuccess={validatedForm.nickName || nickName.length === 0} \\/>

<HookFormInput<FormValues> 
					name="email" 
					icon="mail-line"
					control={control} />

훅폼과 조드

훅폼 (React Hook Form)

리액트에서 폼 데이터를 조작해보았다면 알겠지만, 꽤나 난잡해질 수 있습니다.

훅폼은 리액트(React)에서 폼 관리를 도와주는 라이브러리로,

특히 useRef 기반이라서 리렌더링이 적습니다.

• 간결한 코드: 훅을 이용해 폼 상태를 쉽게 관리할 수 있습니다.