useForm | 양식 제출을 간단하게 처리하는것

 

useForm이라는것은 회사에 들어와서 알게 된 React hook이다.

입사후 첫 프로젝트에서 맡은 첫 개발 기능이 로그인이었는데, 난 부트캠프에서 파이널 프로젝트때 했던것 처럼 

정규식도 추가하고 이렇게 저렇게 나름 열심히 로그인기능(프론트)을 코드로 짰는데,  며칠뒤 보니 useForm으로 내 코드가 대체 되어있었다.

알고 보니 말이 거의 없으신 부장님이 제 코드를 지우고 다시 짜두신것이었다. 마음속으로 왜 설명도 안해주시고 코드만 교체되어있지..  조금 기분이 상한것도 사실이었지만 useForm으로 짜여진 코드를 보니 내가 짠 코드와는 다르게 심플하고 뭔가 깔끔한 느낌이 들었다. 그게 내가 useForm을 처음접한 계기이다.

 

두번째 프로젝트를 진행하면서는 좀 더 자세히 useForm을 보게 되었는데, 읽어보니 이해는 언뜻 되지만, 제대로 이해하고자 정리해보려고 한다. 

 

 

 

UseForm

useForm은 React.js로 웹 개발에 사용하는 라이브러리인데 양식 관리 및 상태를 처리하기 위해 존재한다.

일반적으로 React Hook Form, Formik 또는 Redux Form과 같은 다른 라이브러리와 함께 사용하는데 이번엔 useForm위주로만 볼 계획이다.

 

 

useForm의 주된 목적은

양식 데이터 및 유효성 관리 프로세스를 단순화해서 양식 제출을 쉽게 처리하는 것이다.

 

 

useForm의 장점

단순하다.

useForm은 양식 관리를 단순화한다. 양식 상태, 유효성 검사 및 제출을 관리하는 데 필요한 코드의 양을 줄여서 더 쉽고 빠르게 개발할 수 있다.

사용자 지정이 가능하다.

useForm을 사용하면 사용자 지정 유효성 검사 규칙, 오류 메시지 및 이벤트 핸들러를 정의하여 양식의 동작과 모양을 완전히 제어할 수 있다.

유효성 검사에 효율적이다.

useForm은 내장된 양식 유효성 검사 기능을 제공하므로 각 필드에 대한 유효성 검사 규칙 및 오류 메시지를 정의할 수 있다. 그렇기 때문에 사용자에게 피드백을 더 쉽게 제공하고 잘못된 양식 제출을 방지할 수 있다.

간편한 통합을 한다.

useForm을 기존 React 애플리케이션에 쉽게 통합하거나 다른 양식 관련 라이브러리와 함께 사용하여 상당한 리팩토링 없이 이점을 활용할 수 있다.

향상된 개발자 경험을 느낄 수 있다.

useForm은 양식 상태 관리를 위한해 직관적인 API를 제공하기때문에 개발자 경험을 향상시킨다. 양식 처리와 관련된 노력을 줄여 개발자가 응용 프로그램의 다른 부분을 구축하는 데 집중할 수 있다.

성능 최적화에 우수하다.

useForm은 메모이제이션 같은 기술을 활용하여 불필요한 재렌더링을 최소화하고 양식 구성 요소의 전반적인 성능을 향상시키는 등 성능에 최적화되어 있다. 복잡하거나 많은 양식을 처리할 때 불필요한 재랜더링을 하지 않기 때문에 처리할 양이 많음에도 성능을 좋게 할 수 있다.

 

여기서 잠깐!

메모이제이션이란?  React memoization은 컴포넌트의 출력을 캐시하여 해당 props나 state가 변경되지 않았을 때 또 다시 불필요한 렌더링을 피하는 기술을 뜻한다. 

 

그럼 캐시는? 캐시는 데이터를 임시로 저장하여 빠른 액세스와 검색을 할수 있게 하는 구성 요소이다. 

 

초보 개발자는 .. 이렇게 용어 검색하다가 하루가 다 갈것같다.  어떤 용어에 대해 검색하면 그 설명에서 또 모르는 단어가 나오고 또 그 단어를 검색하면 그 단어 설명에서 또 모르는 단어가 나오고 🤪 

적당히 끈어주고 계속 가야겠다. 

 

테스트하기에 좋다.

useForm은 UI와 독립적으로 양식 기능을 테스트할 수 있으므로 양식 유효성 검사, 제출 및 기타 양식 관련 동작에 대한 단위 테스트를 더 쉽게 작성할 수 있다.

 

 

 

useForm 예시코드

 

import React from 'react';
import { useForm } from 'react-hook-form';

const MyUseFormTest = () => {
  const { register, handleSubmit, errors } = useForm();

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="firstName">First Name</label>
        <input
          type="text"
          name="firstName"
          id="firstName"
          ref={register({ required: 'First name is required' })}
        />
        {errors.firstName && <p>{errors.firstName.message}</p>}
      </div>

      <div>
        <label htmlFor="lastName">Last Name</label>
        <input
          type="text"
          name="lastName"
          id="lastName"
          ref={register({ required: 'Last name is required' })}
        />
        {errors.lastName && <p>{errors.lastName.message}</p>}
      </div>

      <button type="submit">Submit</button>
    </form>
  );
};

export default MyUseFormTest;

 

 

useForm의 주요 기능

1. 양식 상태 관리: 초기 양식 상태를 정의하고 양식 값을 업데이트하고 검색하는 메서드를 제공한다.
2. 양식 유효성 검사: 사용자 입력 유효성 검사는 양식 처리의 필수 부분이다. useForm은 양식 유효성 검사에 대한 기본 제공 지원을 제공하므로 각 필드에 대한 유효성 검사 규칙 및 오류 메시지를 정의할 수 있다. 양식 값의 유효성을 검사하고 오류 메시지를 검색하여 사용자에게 표시하는 기능을 제공한다.
3. 양식 제출: useForm은 양식 제출 처리를 간소화한다. 양식이 제출될 때 호출할 수 있는 onSubmit 기능을 제공하여 데이터를 서버로 전송하거나 애플리케이션 상태를 업데이트하는 것과 같은 작업을 수행할 수 있다. 또한 양식 재설정 및 제출 상태 추적과 같은 기능을 제공한다.
4. 입력 바인딩: useForm은 양식 입력을 양식 상태에 쉽게 바인딩한다. 양식 입력을 해당 양식 값과 연결하는 방법을 제공하므로 사용자 입력을 쉽게 처리하고 양식 상태를 업데이트할 수 있다.
5. 사용자 지정: useForm을 사용하면 양식 처리의 다양한 측면을 사용자 지정할 수 있다. 특정 양식 필드에 대한 사용자 지정 유효성 검사 논리, 오류 메시지 및 이벤트 처리기를 정의할 수 있다. 또한 React 애플리케이션의 다른 라이브러리 및 구성 요소와 통합 측면에서 유연성을 제공한다.

전반적으로 useForm은 React 애플리케이션에서 양식 상태 및 유효성 관리 프로세스를 단순화한다. 양식 데이터를 처리하고 상용구 코드를 줄이며 개발 효율성을 향상시키기 위한 깨끗하고 직관적인 API를 제공한다. useForm의 기능을 활용하여 개발자는 대화식의 강력한 양식을 쉽게 작성할 수 있다.

 

예시 코드를 보면 handleSubmit이나 errors는 한눈에 의미를 유추할 수 있지만 register의 경우 잘 와닿지가 않아 따로 정리해보려한다.

 

 

register

register 기능은 주로 양식 유효성 검사를 활성화하고 양식 필드와 useForm 후크 간의 연결을 설정하는 데 사용한다. 양식 유효성 검사가 필요하지 않은 부분이 있거나 useForm에서 해당 값을 추적할 필요가 없는 경우에는 입력에 대해 register 기능을 제외할 수 도 있다.

 

 

유효성 검사가 필요한 부분과 아닌부분의 입력 필드차이 예시코드

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

const MyRegisterTest = () => {
  const { register, handleSubmit } = useForm();

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="text"
        name="firstName"
        ref={register({ required: true })} // 값을 추적할 필요가 있는 경우
      />

      <input
        type="text"
        name="lastName" // 값을 추적할 필요가 없는 경우
      />

      <input type="submit" value="Submit" />
    </form>
  );
};

export default MyRegisterTest;

 

 

사용법

1. 양식 필드를 useForm 후크에 연결한다.
2. register 함수를 호출하고 관련 구성 옵션을 전달하여 양식 필드와 useForm 후크 사이의 연결을 설정한다. 이 연결을 통해 useForm 후크는 필드 값을 추적하고 유효성 검사 규칙을 적용하며 해당 상태를 전체 양식 상태의 일부로 관리할 수 있다.
3. 양식 유효성 검사를 활성화한다.'useForm' 후크는 등록된 필드와 유효성 검사 규칙을 사용하여 양식이 제출되거나 필드 값이 변경될 때 유효성 검사를 수행하는데 필드의 유효성 검사 상태를 관리하고 유효성 검사 결과에 따라 오류 메시지를 제공한다.
4. '등록' 기능은 양식 유효성 검사를 활성화하는 데 중요한 역할을 한다. 필수 필드, 패턴 일치 또는 사용자 지정 유효성 검사 기능과 같은 유효성 검사 규칙을 '등록' 기능에 전달하여 제공된 규칙에 따라 해당 양식 필드의 유효성을 검사하도록 'useForm' 후크에 지시한다.
5. 양식 상태 관리:register를 사용하여 양식 필드를 등록하면 useForm 후크가 등록된 필드의 값을 추적하고 해당 상태를 내부적으로 관리리한다. 프로그래밍 방식으로 필드 값을 업데이트하는 'setValue'와 유효성 검사 및 데이터 처리를 통해 양식 제출을 처리하는 'handleSubmit'과 같은 메서드를 제공한다.
6. useForm 후크에서 제공하는 다른 기능(예: setValue, handleSubmit 등)과 함께 register 기능을 사용하면 전체 양식의 상태를 관리할 수 있다.

 

react hook에는 정말 다양한것들이 있는것같다. useForm의 존재를 모를때에는 입력값을 하나씩 다 따로 넘겨줘야만 하는줄 알고, 코드를 짰지만  useForm을 사용하면 코드도 간략하고 코드를 짜는것 또한 더 편리하다.

react hook에 대해서도 틈틈히 공부를 해서 적절한때에 활용해야겠다.