Merge pull request #17 from shimdokite/sign

[FE] ♻️ React-Hook-Form에서 watch 성능 리팩토링
shimdokite · May 17, 2024 · adde9e2 · adde9e2
2 parents 6d7d21f + f29875c
commit adde9e2
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 27 deletions.
diff --git a/client/src/components/sign/SignPasswordInput.tsx b/client/src/components/sign/SignPasswordInput.tsx
@@ -11,19 +11,19 @@ import getPasswordByType from '@/utils/getPasswordByType';
 interface SignPasswordInputProps {
   tag: 'password' | 'passwordCheck';
   register: UseFormRegister<SignFormValue>;
-  watch: UseFormWatch<SignFormValue>;
+  password: string;
   errors: FieldErrors<SignFormValue>;
   disabled?: boolean;
 }
 
 export default function SignPasswordInput({
   tag,
   register,
-  watch,
+  password,
   errors,
   disabled,
 }: SignPasswordInputProps) {
-  const passwordFormat = getPasswordByType(tag, watch);
+  const passwordFormat = getPasswordByType(tag, password);
 
   const errorMsg = errors[tag]?.message;
 

diff --git a/client/src/components/signin/SigninForm.tsx b/client/src/components/signin/SigninForm.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useForm } from 'react-hook-form';
+import { useForm, useWatch } from 'react-hook-form';
 
 import useModalStore from '@/stores/modalStore';
 
@@ -16,15 +16,15 @@ export default function SigninForm() {
     register,
     handleSubmit,
     formState: { errors, isSubmitting },
-    watch,
+    control,
   } = useForm<SignFormValue>();
 
   const { open, changeType } = useModalStore();
 
   const { mutate: onSiginIn } = useSigninMutation();
 
-  const email = watch('email');
-  const password = watch('password');
+  const email = useWatch({ name: 'email', control });
+  const password = useWatch({ name: 'password', control });
 
   return (
     <section className="flex flex-col items-center gap-5 px-5 mt-3">
@@ -37,7 +37,7 @@ export default function SigninForm() {
               tag="password"
               register={register}
               errors={errors}
-              watch={watch}
+              password={password}
             />
           </div>
 

diff --git a/client/src/components/signup/SignupForm.tsx b/client/src/components/signup/SignupForm.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useForm } from 'react-hook-form';
+import { useForm, useWatch } from 'react-hook-form';
 
 import useModalStore from '@/stores/modalStore';
 import useSignStore from '@/stores/signStore';
@@ -20,20 +20,20 @@ export default function SignupForm() {
     register,
     handleSubmit,
     formState: { errors, isSubmitting },
-    watch,
+    control,
   } = useForm<SignFormValue>();
 
+  const email = useWatch({ name: 'email', control });
+  const password = useWatch({ name: 'password', control });
+  const nickname = useWatch({ name: 'nickname', control });
+
   const { changeType } = useModalStore();
   const { isCode, setIsCode } = useSignStore();
   const { isGuestMode, setClear } = useUserStore();
 
   const { mutate } = useAuthEmailMutation();
   const { mutate: onSignup } = useSignupMutation();
 
-  const email = watch('email');
-  const password = watch('password');
-  const nickname = watch('nickname');
-
   const onValidateEmail = () => {
     if (!email) return;
 
@@ -85,15 +85,15 @@ export default function SignupForm() {
             tag="password"
             register={register}
             errors={errors}
-            watch={watch}
+            password={password}
             disabled={!isCode}
           />
 
           <SignPasswordInput
             tag="passwordCheck"
             register={register}
             errors={errors}
-            watch={watch}
+            password={password}
             disabled={!isCode}
           />
 

diff --git a/client/src/utils/getPasswordByType.ts b/client/src/utils/getPasswordByType.ts
@@ -1,13 +1,6 @@
-import { UseFormWatch } from 'react-hook-form';
-
-import { SignFormValue } from '@/types/common';
-
 import { SIGN_VAILDATION } from '@/constants/contents';
 
-export default function getPasswordByType(
-  tag: string,
-  watch?: UseFormWatch<SignFormValue>,
-) {
+export default function getPasswordByType(tag: string, password?: string) {
   if (tag === 'password') {
     return {
       validation: {
@@ -20,12 +13,11 @@ export default function getPasswordByType(
     };
   }
 
-  if (tag === 'passwordCheck' && watch) {
+  if (tag === 'passwordCheck' && password) {
     return {
       validation: {
         required: true,
-        validate: (value: string) =>
-          value === watch('password') || SIGN_VAILDATION[tag],
+        validate: (value: string) => value === password || SIGN_VAILDATION[tag],
       },
     };
   }