1. React Hook Form

: 간편한 리액트 폼 관리 라이브러리

1. 장점

1) 비제어 컴포넌트로 동작한다.

react hook form은 기본적으로 비제어 컴포넌트 방식으로 구현되어 있어, 렌더링 이슈를 해결한다. 비제어 컴포넌트 방식의 장점은 그대로 살리면서, 제어 컴포넌트에서만 다룰 수 있는 실시간 유효성 검사, 실시간 동기화 등의 API를 제공하여 실시간 유효성 검사 및 동기화를 가능하게 해준다.

<aside> 💡 제어 컴포넌트 vs 비제어 컴포넌트?

input, textarea, select와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다.

• 제어 컴포넌트 : React에 의해 값이 제어되는 입력 폼 엘리먼트
  • input, textarea, select와 같은 폼 엘리먼트의 값 업데이트에 setState를 이용하여 값을 업데이트하는 것을 말한다.
  • 유효성 검사에 탁월하지만, 값이 바뀔 때마다 리렌더링이 일어나므로 비효율적이다.
• 비제어 컴포넌트 : DOM자체에서 폼 데이터가 다뤄진다.
  • 즉, React에 의해 값이 제어되지 않는 컴포넌트를 말한다.
  • ref를 사용하여 DOM에서 폼 값을 가져올 수 있다.
  • 값이 바뀌어도 리렌더링이 일어나지 않는다. </aside>

<aside> 💡 React Hook Form은 어떻게 이러한 문제들을 해결했을까?

1. React Hook Form은 어떻게 렌더링 이슈를 해결했을까?

2. React Hook Form은 어떻게 동기화 이슈는 어떻게 해결했을까?

</aside>

2) 여러 가지 유틸과 코드 단순화

React Hook Form에서 자체적으로 제공하는 유틸로 대부분의 유틸 함수를 대체할 수 있다. 예를 들어 reset, setValue, dirty 등이 있다.

3) class validator 지원

class-validator를 이용해서, 각각의 필드에 대해 손쉽게 유효성 검사할 수 있다.

export default class ProjectModel {
  @Length(1, 100, { message: ERROR_MESSAGE_PROJECT_NAME })
  projectName = '';

  ...
}

백엔드에서도 이를 사용하여 백엔드와 프론트엔드 사이 유효성 검사 로직 싱크를 맞출 수 있다.

4) 코드의 일관성 확보

React Hook Form은 어느정도 사용하는 방법이 정해져 있기 때문에, 코드의 일관성 확보를 위한 팀원 간의 커뮤니케이션 비용을 최소화할 수 있다.