일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- 비동기
- C++
- 백준
- javascript
- prototype 프로퍼티
- 동적 계획법
- 최소공배수
- 동기
- 한글이 두 번 입력됨
- python
- 한글 입력 시 이벤트 두 번 발생
- css
- float: right
- 알고리즘
- 파이썬
- 메타버스
- 낙관적 업데이트
- 9610
- 백준 9610번 파이썬 문제 풀이
- 자바스크립트
- Tanstack Query
- dp
- 함수 객체의 프로퍼티
- 유클리드 호제법
- 프로그래밍
- 시간
- 2522
- 백트래킹
- backtracking
- __proto__ 접근자 프로퍼티
Archives
- Today
- Total
염딩코
React Hook Form에 대해 알아보자. 본문
![](https://t1.daumcdn.net/keditor/emoticon/friends1/large/009.gif)
React Hook Form은 간편하고 유연한 방식으로 React 애플리케이션에서 폼을 다룰 수 있는 라이브러리입니다. 이를 사용하면 복잡한 폼 로직을 작성하는데 드는 시간과 노력을 줄일 수 있습니다. 이번 글에서는 React Hook Form의 사용법과 예시를 소개하겠습니다.
React Hook Form 사용법
React Hook Form은 useForm이라는 Hook 함수를 제공합니다. 이 Hook 함수를 사용하여 폼을 관리하고, 입력값의 유효성 검사와 전송 처리를 수행할 수 있습니다. 아래는 React Hook Form을 사용하여 간단한 폼을 만드는 예시입니다.
import React from 'react';
import { useForm } from 'react-hook-form';
function App() {
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = (data) => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<label htmlFor="username">Username:</label>
<input type="text" id="username" {...register("username", { required: true })} />
{errors.username && <span>Username is required.</span>}
<label htmlFor="password">Password:</label>
<input type="password" id="password" {...register("password", { required: true })} />
{errors.password && <span>Password is required.</span>}
<button type="submit">Submit</button>
</form>
);
}
export default App;
예시: 입력값 검사
React Hook Form을 사용하면 입력값의 유효성 검사를 간편하게 처리할 수 있습니다. 예를 들어, 이메일 주소 입력 필드에서 입력값이 이메일 형식에 맞는지 검사하는 방법은 아래와 같습니다.
<input type="email" id="email" {...register("email", { required: true, pattern: /^\S+@\S+$/i })} />
{errors.email?.type === "required" && <span>Email is required.</span>}
{errors.email?.type === "pattern" && <span>Email is invalid.</span>}
위 코드에서 pattern 규칙에 정규식을 사용하여 이메일 형식을 검사합니다. errors 객체의 속성을 사용하여 검사 결과를 확인할 수 있습니다.
'Front-End > React' 카테고리의 다른 글
[TIL] 낙관적 업데이트로 누구보다 빠르게 북마크하기(feat. Tanstack-query) (0) | 2024.06.01 |
---|---|
[React] useEffect 훅의 clean-up 함수 (0) | 2024.01.08 |
[React] useRef란? (0) | 2023.03.04 |
DOM이란? (0) | 2023.02.16 |