react-hook-form 도입으로 렌더링 문제 해결!
by DD
3년 전
조회수 4
React-hook-form 도입으로 렌더링 문제 해결 및 코드 단순화 달성
비제어 컴포넌트 방식과 class-validator 연동을 통해 유연성 확보
코드 라인 6,977 감소 및 상태 관리 단순화로 유지보수성 향상
렌더링 문제 해결의 핵심: 비제어 컴포넌트
React-hook-form은 비제어 컴포넌트 방식을 사용하여 렌더링 성능을 개선한다. 구체적으로, useFormContext를 통해 폼 데이터를 전역적으로 관리하여 불필요한 리렌더링을 방지한다. 따라서 상태 관리 단순화와 성능 향상을 동시에 달성한다.
class-validator 연동: 유효성 검증 통합
React-hook-form은 class-validator를 사용하여 서버와 클라이언트 간의 유효성 검증 로직을 통합한다. 구체적으로, classValidatorResolver를 통해 class-validator의 에러 형식을 그대로 사용할 수 있다. 따라서 코드 중복 감소와 데이터 무결성을 확보한다.
useFieldArray 활용: 동적 폼 관리
useFieldArray 훅을 사용하여 동적으로 변하는 폼을 효율적으로 관리한다. 구체적으로, append, prepend, insert, update 기능을 통해 배열 데이터를 쉽게 조작한다. 따라서 코드 가독성을 높이고, 유지보수성을 향상시킨다.
