React Hook Form 인트로
React Hook Form 이란
- 정의 : 사용하기 쉬운 유효성 검사와 함께 성능 기준에 맞으며 유연하고 확장 가능한 폼
- 사용 가능한 프레임워크 : 말 그래도 React와 React Native에서 사용 가능함
특장점
- re-render 방지 : component를 분리하여 re-render 방지 및 성능 향상
- Subscriptions : 개별 input을 subscription
- 렌더링 줄이기
- 더 빠른 mounting(Component가 실행되고 요소가 DOM 추가 및 업데이트)
설치하기
npm install react-hook-form아래 간단한 예시를 만들어 보았습니다.
- 먼저 기본 react 컴포넌트에서 useForm 함수를 react-hook-form에서 가져옵니다.
- useForm 함수는 양식을 쉽게 관리할 수 있게 만들어 주는 사용자 정의 hook 입니다.
import "./styles.css";
import React from "react";
import { useForm } from "react-hook-form";
export default function App() {
return (
<div className="App">
<h1>React Hook Form 예시</h1>
</div>
);
}- 그 다음 form 태그를 추가해줍니다.
import "./styles.css";
import React from "react";
import { useForm } from "react-hook-form";
export default function App() {
return (
<div className="App">
<h1>React Hook Form 예시</h1>
<form>
</form>
</div>
);
}- 값을 입력해줄 input, select 태그를 추가해줍니다.
import "./styles.css";
import React from "react";
import { useForm } from "react-hook-form";
export default function App() {
return (
<div className="App">
<h1>React Hook Form 예시</h1>
<form>
<input/>
<select>
<option value="female">여성</option>
<option value="male">남성</option>
<option value="other">기타</option>
</select>
<input type="submit" />
</form>
</div>
);
}
- useForm에서 input을 등록하거나 요소를 선택하고 React Hook Form에 적용할 수 있도록 해주는 register와 form 유효성 검사가 성공할 때 폼 데이터를 받아오는 함수인 handle submit을 가져옵니다.
import "./styles.css";
import React from "react";
import { useForm } from "react-hook-form";
export default function App() {
const { register, handleSubmit } = useForm();
return (
<div className="App">
<h1>React Hook Form 예시</h1>
<form>
<input />
<select>
<option value="female">여성</option>
<option value="male">남성</option>
<option value="other">기타</option>
</select>
<input type="submit" />
</form>
</div>
);
}
- register는 등록 시킬 요소에 이름을 할당하고 submit 버튼을 클릭하여 폼 데이터를 가져와 console.log에 표시되도록 구현합니다.
import "./styles.css";
import React from "react";
import { useForm } from "react-hook-form";
export default function App() {
const { register, handleSubmit } = useForm();
const onSubmit = (data) => console.log(data);
return (
<div className="App">
<h1>React Hook Form 예시</h1>
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("firstName")} />
<select {...register("gender")}>
<option value="female">여성</option>
<option value="male">남성</option>
<option value="other">기타</option>
</select>
<input type="submit" />
</form>
</div>
);
}
Author And Source
이 문제에 관하여(React Hook Form 인트로), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@pluviabc1/React-Hook-Form-인트로저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
