[Seminar] React Hook Form

[junnyya]

폼 관리를 쉽고 가볍게, React Hook Form 도입 제안

1. 도입 배경: 우리는 왜 '폼(Form)' 때문에 고통받는가?

현재 우리 프로젝트(Incherin)를 개발하면서 내 정보 수정, 그리고 앞으로 개발할 리뷰 작성까지 다양한 입력 폼(Form)을 다루고 있습니다.

하지만 기존의 useState를 사용한 방식에는 몇 가지 문제가 있었습니다.

1. 반복되는 보일러플레이트: 입력창 하나를 만들 때마다 상태(state)와 핸들러(onChange)를 계속 만들어야 합니다.
2. 복잡한 유효성 검사: "비밀번호 8자 이상", "이메일 형식 체크" 등을 구현하려면 if-else 문이 얽히고설켜 코드가 지저분해집니다.
3. 불필요한 리렌더링: 글자 하나를 칠 때마다 컴포넌트 전체가 다시 그려져 성능에 영향을 줍니다.

이러한 비효율을 해결하고, 개발 속도와 코드 퀄리티를 높이기 위해 React Hook Form 도입을 제안합니다.

---

2. React Hook Form이란?

React Hook Form은 React에서 폼을 가장 쉽고 효율적으로 관리하게 해주는 라이브러리입니다.

• 특징: 비제어 컴포넌트(Uncontrolled Component) 방식을 사용하여 리렌더링을 최소화합니다.
• 장점: 코드가 간결해지고, 유효성 검사(Validation)가 매우 강력합니다.
• 인기: 현재 React 생태계에서 가장 많이 사용되는 폼 라이브러리 중 하나입니다.

---

3. 코드 비교: Before & After

백문이 불여일견! 우리 프로젝트의 UserInfoSection.jsx 코드가 어떻게 변하는지 비교해 보겠습니다.

❌ Before: 기존 방식 (useState 노가다)

입력값 하나(닉네임)를 받기 위해 3가지 단계가 필요합니다.

// 1. 상태 선언
const [nickname, setNickname] = useState('');
const [error, setError] = useState('');

// 2. 핸들러 함수 작성 (유효성 검사 로직이 섞임)
const handleChange = (e) => {
  const value = e.target.value;
  setNickname(value);
  if (value.length < 2) {
    setError('닉네임은 2글자 이상이어야 합니다.');
  } else {
    setError('');
  }
};

// 3. JSX 연결
return (
  <div>
    <input value={nickname} onChange={handleChange} />
    {error && <span>{error}</span>}
  </div>
);

✅ After: React Hook Form 도입

단 한 줄로 상태 관리와 유효성 검사가 끝납니다.

// 1. 훅 불러오기
const { register, handleSubmit, formState: { errors } } = useForm();

// 2. JSX 연결 (register 함수 하나로 끝!)
return (
  <form onSubmit={handleSubmit(onSubmit)}>
    <input 
      {...register("nickname", { 
        required: "닉네임을 입력해주세요", 
        minLength: { value: 2, message: "2글자 이상 입력해주세요" } 
      })} 
    />
    {/* 에러 메시지 자동 처리 */}
    {errors.nickname && <span>{errors.nickname.message}</span>}
  </form>
);

---

4. 핵심 개념

이 라이브러리를 쓰기 위해 알아야 할 것은 딱 3가지 함수입니다.

1. register (명찰 달아주기):
   • input 태그에 이름을 붙여서 폼 관리자에게 등록하는 함수입니다.
   • ref, onChange, onBlur 등을 알아서 연결해 줍니다.
   • 예: ...register("email")
2. handleSubmit (검문소):
   • 폼 제출 버튼을 눌렀을 때 실행됩니다.
   • 우리가 정한 규칙(유효성 검사)을 통과했는지 확인하고, 통과했다면 데이터를 모아서 다음 함수로 넘겨줍니다.
3. formState (상황판):
   • 현재 폼의 상태를 보여줍니다. 가장 많이 쓰는 건 errors 객체로, 유효성 검사에 실패했을 때 에러 메시지를 담고 있습니다.

---

5. 우리 프로젝트(Incherin) 적용 포인트

이 기술을 도입하면 우리 프로젝트의 다음 부분들이 개선됩니다.

1. 내 정보 수정 (UserInfoSection.jsx):
   • useState 범벅이었던 코드를 깔끔하게 리팩토링할 수 있습니다.
2. 리뷰 작성 페이지 (예정):
   • 가장 복잡할 것으로 예상되는 리뷰 작성(사진, 별점, 태그, 내용) 기능을 아주 쉽게 구현할 수 있습니다.

---

6. 결론

React Hook Form은 단순히 코드를 줄이는 것을 넘어, **"입력 데이터를 다루는 스트레스"**에서 우리를 해방시켜 줍니다.이후 admin 버전을 개발할때도 큰 도움을 줄 것입니다.
앞으로 남은 개발 기간 동안 폼 관련 작업의 생산성을 높이기 위해 도입을 강력히 추천합니다!

https://velog.io/@boyeon_jeong/React-Hook-Form