heyday2024 님의 블로그

React Hook Form의 사용 배경 및 장점React로 로그인/회원가입 폼을 구현할 때 처음에는 useState를 사용하여 각 필드의 상태를 개별적으로 관리했다. 하지만 이렇게 하면 관리해야 할 state가 많아지고, 입력할 때마다 컴포넌트가 리렌더링되는 문제가 발생했다. 이러한 비효율성을 해결하기 위해 react-hook-form을 도입했다. React Hook Form 장점:간단한 API: 필드 값 관리, 유효성 검사, 제출 핸들러를 간단하게 구현 가능.리렌더링 최소화: 내부적으로 ref를 활용하여 상태를 관리하므로 폼 상태 변경 시 불필요한 리렌더링이 발생하지 않음.유효성 검사 지원: 기본적인 유효성 검사를 쉽게 설정 가능간소화된 코드: 여러 개의 state와 이벤트 핸들러를 사용하지 않고, ..

HTML5 기본 유효성 검사와 맞춤형 유효성 검사의 차이1. HTML5 기본 유효성 검사의 동작 원리유효성 검사 조건:required, minlength, maxlength, pattern 등 속성을 통해 브라우저가 자동으로 입력값 검증.폼 제출 전 브라우저가 각 필드의 유효성을 확인.기본 메시지 표시 조건:onSubmit 이벤트에서 e.preventDefault()를 호출하지 않아야 기본 유효성 검사가 동작. 속성을 사용하면 기본 검사가 비활성화됨.2. 유효성 검사가 동작하지 않을 수 있는 상황JavaScript로 직접 구현한 경우:브라우저의 기본 메시지가 JavaScript 커스텀 메시지와 충돌.예: setErrors와 같은 사용자 정의 에러 메시지 사용.e.preventDefault()를 호출한 경..