[Next.js] react-hook-form 도입기

준이·2023년 7월 14일

개요

회사에서 새로운 어드민 홈페이지를 만들기 전 도입하게 될 기술 논의를 하는데, 먼저 내가 다른 데이터센터라는 어드민 홈페이지를 만들면서 느끼게 된 점들을 얘기하며 react-hook-form의 도입을 제안했고 회의 끝에 도입을 결정하게 되었다.

Npm trends에서도 볼 수 있듯이 form library 쪽에서는 1등이고, 다운수가 많다는 것은 그만큼 사용자가 많고 정보가 많다는 것을 뜻하기 때문에 초급 개발자로 구성된 우리 프론트팀에게는 가장 알맞은 기술이라는 생각이 들었다.

무엇보다 신기술이라고 막 사용하는 것이 아니라 "왜" 사용하는 지가 가장 중요하다고 생각하는데, 정리해보려고 한다.

기존 어드민에서 상태를 관리하다보니 보통 Get 메서드로 리스트를 받아오는 것 정도가 전부였음에도 문득 에러처리, 유효성 검사 등 요구사항이 많아짐에 따라 코드가 방대하게 늘어나고 관리가 어려워지는 걸 느낄 수 있었다.

react-hook-form에서는 상태관리도 기존에 useState로 일일히 선언하고 set 할 필요없이 훨씬 수월했고, 유효성 검사 외에도 다양한 기능을 제공하고 있었다.

당장에 큰 어드민 페이지가 아니기 때문에, 자세한 기능을 활용할 일은 없었지만 당장에 필요한 기능들을 기존의 코드보다 나은 방향으로 활용할 수 있다는 점은 굉장히 큰 장점이었다.

그리고 찾아보면서 알게 된 정말 큰 장점이라고 생각되는 점은, 비제어 컴포넌트라는 것이다.

원래 기존에 사용하던 input에 onChange가 될때마다 setState를 해주면 상태가 변할 때마다 컴포넌트가 실시간으로 값이 동기화 되는데 이를 제어 컴포넌트라고 한다.

리액트는 값이 변경될 때마다 리랜더링 되는데 상태가 늘어날 때마다 컴포넌트 전체가 리랜더링되기 때문에 상당히 비효율적이고, 성능적으로도 좋지 않다.

이를 방지해주어 최소한의 리랜더링을 함으로써 성능을 향상시켜주니, 얼마나 큰 장점인가..

새로 만들게 된 어드민은 최소 10개 이상의 상태를 POST 메서드를 활용해 보내줘야하는데, 그 때마다 수십개의 상태들이 리랜더링 된다고 생각하면.. 성능적으로 끔찍한 결과를 초래할 것이다..

mui 라이브러리를 사용하는데 이러한 외부 라이브러리 사용까지도 고려해서 사용법을 제공한다. Controller 라는 컴포넌트를 제공함으로 다양한 외부라이브러리와의 호환성을 제공한다.

당연히 요새는 어쩌면 기본값이 되어버린 Typescript와의 호환성도 제공한다.

물론 단점만 있는 것은 아니지만.. react-hook-form 같은 경우는 단점이 정말 적다고 생각하는데

학습 곡선 : 새 라이브러리들을 사용함에 있어서 늘 그렇듯 hook-form도 학습 곡선이 존재한다(근데 쉬움. 난 그랬음.)
복잡한 기능 구현이 어려울 수 있음 : 경량한 라이브러리라 복잡한 기능을 구현이 어려울 수 있다고 하는데 얼마나 복잡한 기능을 구현하길래 그렇게 되는 걸까.. 아직 겪어보질 않아서 잘 모르겠다.

이정도.. 아직 잘 모르겠다 단점을.. 위의 사항도 찾아보고 올리게 된거라 사실 사용 중에는 장점만 느껴지고 있다.