📖 TIL - 프로젝트 4일차: React Hook Form 라이브러리를 사용하여 실전 도입과 트러블 슈팅 기록

🤔 도입 전: 기존 폼 관리 방식 이해하기

제어 컴포넌트 (Controlled Component)

// 기존 코드
const [addFeedData, setAddFeedData] = useState(INITIAL_ADD_FEED_DATA);

const handleInputChange = (e, field) => {
  const { value } = e.target;
  setAddFeedData(state => ({
    ...state,
    [field]: value,
  }));
};

매 입력마다 리렌더링이 발생하고, 데이터를 개별적으로 받아오는 비효율적인 구조였습니다.
일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다.
폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다.

useState를 사용할때 onChange에서 받아오는 값은 비효율적이라고 생각합니다. 하나하나 값을 받아오기 때문에 속도 역시 느릴 수 밖에 없는 단점이 존재할 것이기에..

실제로 useState에서 input값을 onChange로 받아오게 된다면...

ex) 가나다 -> ㄱ, 가, 가ㄴ, 가나, 가나ㄷ, 가나다

와 같은 상황에서도 계속적으로 데이터를 하나하나 받아오므로 비효율적일 것입니다.

비제어 컴포넌트 (UnControlled Component)

비제어 컴포넌트로 들만한것은 useRef()라고 생각하는데요. ref는 값을 업데이트 하여도 리렌더링 되지않는 특성으로, 입력이 모두 되고 난 후 ref를 통해 값을 한번에 가져와서 활용합니다. state로 값을 관리하지 않기 때문에 값이 바뀔때마다 리렌더링을 하지 않고 값을 한번에 가져올 수 있는 성능상의 이점이 있으나, 데이터를 완벽하게 가져올 수 없는 단점이 있겠죠..

그럼 이러한 방법외에 다른 방법을 사용해 볼 수는 없을까?
마침 그것과 겸해서 해당 프로젝트에서 유효성 검사가 필요하기 때문에 관련 정보를 서치해보았다. 혹시 리액트에서 권장하고 많이 사용하는 유효성 검사는 없을까?

🧚🏻 안녕, 나는 React Hook Form

React Hook을 사용하여 폼 관리와 유효성 검사를 간단하게 실시할 수 있는 라이브러리를 발견하게 되었습니다

비제어 컴포넌트

react-hook-form은 비제어 컴포넌트로 렌더링을 최적화 할 수 있는 라이브러리라고 하네요?

기본적인 구조

import { useForm } from "react-hook-form";

const {
    handleSubmit, // form onSubmit에 들어가는 함수
    register, // onChange 등의 이벤트 객체 생성
    watch, // register를 통해 받은 모든 값 확인
    formState: { errors }, // errors: register의 에러 메세지 자동 출력
  } = useForm();

사용법

1. 기본 세팅:

import { useForm } from "react-hook-form";

function YourForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data); // 폼 데이터가 여기로 들어옵니다
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("이름")} />
      <button type="submit">제출</button>
    </form>
  );
}

2. register란?

• input 필드를 React Hook Form에 등록하는 메서드입니다
• 이 메서드를 통해 form의 validation과 값을 추적할 수 있습니다

// 기본 사용
<input {...register("username")} />

// 유효성 검사 규칙 추가
<input {...register("username", { 
  required: true,  // 필수 입력
  minLength: 2,    // 최소 2글자
  maxLength: 20    // 최대 20글자
})} />

3. 에러 처리:

<input {...register("username", { required: true })} />
{errors.username && <p>이름을 입력해주세요!</p>}

4. 기본값 설정:

const { register } = useForm({
  defaultValues: {
    username: "김코딩",
    email: "kim@coding.com"
  }
});

실제 사용 예시:

function SignupForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>이메일</label>
        <input 
          {...register("email", { 
            required: "이메일은 필수입니다",
            pattern: {
              value: /\S+@\S+\.\S+/,
              message: "이메일 형식이 아닙니다"
            }
          })} 
        />
        {errors.email && <p>{errors.email.message}</p>}
      </div>

      <div>
        <label>비밀번호</label>
        <input 
          type="password"
          {...register("password", {
            required: "비밀번호는 필수입니다",
            minLength: {
              value: 8,
              message: "8자리 이상 입력해주세요"
            }
          })}
        />
        {errors.password && <p>{errors.password.message}</p>}
      </div>

      <button type="submit">가입하기</button>
    </form>
  );
}

장점:
1. 간단한 폼 관리
2. 적은 코드로 유효성 검사 구현
3. 에러 처리가 쉬움
4. 리렌더링 최적화

기존 방식과의 차이:

// 기존 방식
const [email, setEmail] = useState("");
<input 
  value={email}
  onChange={(e) => setEmail(e.target.value)}
/>

// React Hook Form
<input {...register("email")} />

React Hook Form을 사용하면 useState로 각각의 input 상태를 관리할 필요가 없어져서 코드가 훨씬 간단해집니다!

🚨 도입 과정에서 만난 문제들

1. react-router-dom과의 버전 충돌문제 발생

yarn add react-hook-form
을 사용하니 어라...

yarn add react-hook-form
yarn add v1.22.22
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
error react-router-dom@7.1.5: The engine "node" is incompatible with this module. Expected version ">=20.0.0". Got "18.20.5"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

예?? 뭐가 잘못된거지..
이럴땐 뭐다? 서치다..

원인을 찾아보니, react-router-dom과의 버전이 맞지 않는 문제가 발생한것..
현재 사용중인 router기능에 최대한 무리가 가지 않도록 버전을 조절하였다.

as-is: "react-router-dom": "^7.1.5"
to-be: "react-router-dom": "6.4.0", "react-hook-form": "^7.54.2",

위과 같이 맞추어 주니, 정상적으로 작동!!

2. 잘못된 submit 핸들링

// ❌ 처음 시도한 방식
<form onSubmit={(e) => {
  e.preventDefault()
  handleSubmit(handleAddFeed)
}}>

// ✅ 올바른 방식
<form onSubmit={handleSubmit(handleAddFeed)}>

handleSubmit이 이미 preventDefault를 처리한다는 걸 몰라서 발생한 실수였습니다.

2. 데이터가 전달되지 않는 문제

// ❌ 문제의 코드
<StFormTitleInput
  value={addFeedData.title}
  onChange={(e) => handleInputChange(e, 'title')}
/>

// ✅ 해결: register 함수 사용
<StFormTitleInput
  {...register("title", { required: true })}
/>

React Hook Form과 input이 제대로 연동되지 않아 발생한 문제였습니다.
실질적으로 어떤 코드를 사용할거야! 라고 명시하지 않은셈

💡 유효성 검사 구현

1. 기본 유효성 검사

{...register("title", {
  required: true,
  minLength: {
    value: 6,
    message: "제목은 최소 6자 이상이어야 합니다"
  },
  maxLength: {
    value: 50,
    message: "제목은 최대 50자를 초과할 수 없습니다"
  },
  setValueAs: (value) => value.trim()
})}

setValueAs로 바로 공백제거를 진행해주고..

2. 에러 메시지 처리

{errors?.title && (
  <p>
    {errors.title.type === "required" && "제목은 필수입니다."}
    {errors.title.type === "minLength" && "제목은 최소 6자 이상이어야 합니다"}
    {errors.title.type === "maxLength" && "제목은 최대 50자를 초과할 수 없습니다"}
  </p>
)}

✨ 신기했던 점들

1. 자동 폼 제출 방지

   • 유효성 검사 실패 시 자동으로 제출 막아줌
   • 별도 처리 불필요

2. 불필요한 코드 제거

   // 이런 코드들이 모두 필요 없어짐
   const [addFeedData, setAddFeedData] = useState(INITIAL_ADD_FEED_DATA);
   const handleInputChange = (e, field) => {...};
   useEffect(() => ...생략 ,[])

3. 깔끔한 에러 처리

   • formState: { errors }로 쉽게 에러 상태 파악
   • 타입별 에러 메시지 분기 처리 가능

💭 배운 점

1. 라이브러리가 제공하는 기능을 제대로 이해하고 사용하는 것의 중요성
2. 문서를 꼼꼼히 읽었다면 피할 수 있었던 실수들이 있었음
3. 때로는 더 적은 코드가 더 나은 해결책이 될 수 있다는 것

React Hook Form을 도입하면서 겪은 시행착오들이 오히려 좋은 학습 경험이 되었습니다. 공식문서를 읽고 접하는건 새삼 어렵습니다.
react-hook-form 공식문서