본문 바로가기
IT오류잡기/React공부하기

[React.js]초보자도 쉽게 따라하는 useForm 사용하기

by 고집프로그래머 2022. 11. 30.
반응형

안녕하세요. 이번에 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
반응형