반응형
안녕하세요. 이번에 useForm 사용하게 되면서 인터넷에 useForm 사용 검색하고 여기 저기 찾아봤는데 ,
훌륭한 소스들이 많았습니다!
하지만 초보자들은 따라하기가 쉽지않을거같아요 useForm을 활용한 component를 활용해서 사용해야해서요
그래서 따로 component를 사용하지 않고 바로 useForm 활용할 수 있도록 참고할 수 있는 사이트를 찾았습니다
해당 사이트 참고해서 설명을 드릴게요 .
import React from "react";
import { useForm } from "react-hook-form";
const testUseForm = () =>{
const { register, handleSubmit } = useForm();
const debugRegistData = (d) => console.log(d);
return (
<form onSubmit={handleSubmit(debugRegistData)} />
<div>
<label>ID</label>
<input name="id" {...register('id')} />
</div>
<div>
<label>Password</label>
<input type="email" name="password" {...register('password')} />
</div>
<button>Submit</button>
</form>
)
}
export default testUseForm;
간단하게 useForm을 이용한 id,password 를 입력하는 폼을 짜봤습니다.
register, handleSubmit 의 useForm에서 제공하는 함수를 활용하여 바로 활용할 수 있습니다.
Submit 버튼을 누르면 , 콘솔창에 { name : 'test' , password: '123' }
이런식으로 바로 찍히는걸 보실 수 있습니다.
혹시 질문있으시면 댓글 달아주시면 바로 확인해 보겠습니다.
감사합니다 :)
728x90
반응형
'IT오류잡기 > React공부하기' 카테고리의 다른 글
[React.js] 초보자도 쉽게 따라하는 checkbox defualt로 체크 하기 (0) | 2022.11.28 |
---|---|
[React.js] dotenv 라이브러리로 .env .dev .local 환경 변수 설정 (0) | 2022.11.22 |
[React.js] useLayoutEffect 와 useEffect의 차이점(리스트 초기 화면 깜빡임 해결) (0) | 2022.11.16 |
[React.js] useReducer, useState은 언제 사용 하는가? (0) | 2022.11.16 |
[React.js] yarn.lock / package-lock.json 파일을 혹시 .gitignore에 포함 하셨나요 ? (0) | 2022.11.15 |