[springboot+jwt+react#3] login / React Hook Form

이전 포스팅

2023.07.21 - [spring+jwt+react] - [springboot+jwt+react#1] react cra frontend 초기설정

2023.07.22 - [spring+jwt+react] - [springboot+jwt+react#2] react layout / react-dom

오늘 만들것

• React Hook Form을 이용한 로그인 폼

사전에 알아야 할것

• react-hook-form

걸리는 시간

• 20분

실습

저번시간에 이어서,, login 기능을 만들어보도록 하자
우선 로그인form을 만들어야하므로 router에 login path를 추가하고 page를 하나 생성하도록 한다.
로그인 빈껍데기부터 만들고

/pages/LoginPage.tsx

const LoginPage = () => {
    return (
        <>
            LoginPage 입니다.
        </>
    )
}

export default LoginPage;

라우터에 /login을 추가해준다, 이전코드를 전부다 적진않고 필요한 내용만 발취해서 추가할 예정이니 참고바랍니다.
/App.tsx

function App() {
  return (
      <Layout>
          <Routes>
              <Route path="/" element={<HomePage />} />
              <Route path="/login" element={<LoginPage />} />
          </Routes>
      </Layout>
  );
}

자 추가한후에 페이지가 잘뜨는 지 확인

잘나오는거 확인하고 이제 로그인 form을 작성해보도록 하자
로그인 컴포넌트를 하나 생성하고

/components/Auth/LoginForm.tsx

const LoginForm = () => {
    return (
        <section>
            <h1>Login</h1>
            <form>
                <div>
                    <label htmlFor='userid'>Id</label>
                    <input type='text' id='userid' required className={"border-2"}/>
                </div>
                <div>
                    <label htmlFor="password">Password</label>
                    <input type='password' id='password' required className={"border-2"}/>
                </div>
                <div>
                    <button type='submit'>Login</button>
                </div>
            </form>
        </section>
    )
}

export default LoginForm;

아까 만들어놓은 LoginPage.tsx에서 컴포넌트를 호출해주자
/pages/LoginPage.tsx

import React from "react";
import LoginForm from "../components/Auth/LoginForm";

const LoginPage = () => {
    return (
        <LoginForm />
    )
}

export default LoginPage;

아니 선생님 그냥 LoginPage.tsx에 바로 작성하면 안되나요?
저렇게 컴포넌트로 만들어놓으면,, 나중에 로그인 방식이 변경되었을때 컴포넌트만 변경하면 되겠지?

자 컴포넌트를 바꾸고 다시한번 확인

잘 나온다... 이제 react hook form을 적용해보자
react hook form을 이름그대로 form관련 작업을 편하게 해주는 유틸리티리를 제공해주는 라이브러리다.

나도 처음써보는거라 빠르게 Get Started를 읽어보고
아래와 같이 LoginForm.tsx를 수정해준다.

import {SubmitHandler, useForm} from "react-hook-form";

type Inputs = {
    userId: string,
    userPassword: string,
};

const LoginForm = () => {
    const { register, handleSubmit, watch, formState: { errors } } = useForm<Inputs>();
    const onSubmit: SubmitHandler<Inputs> = data => console.log(data);

    // watch console.
    console.log(watch(["userId","userPassword"]))

    return (
        <section>
            <h1>Login</h1>
            <form onSubmit={handleSubmit(onSubmit)}>
                <div>
                    <label htmlFor='userid'>Id</label>
                    <input className={"border-2"} {...register("userId", { required: true })}/>
                    {errors.userId && <span>This field is required</span>}
                </div>
                <div>
                    <label htmlFor="password">Password</label>
                    <input type='password' className={"border-2"} {...register("userPassword", { required: true })}/>
                    {errors.userPassword && <span>This field is required</span>}
                </div>
                <div>
                    <button type='submit'>Login</button>
                </div>
            </form>
        </section>
    )
}

export default LoginForm;

id와 password를 입력하고 Login 버튼을 눌러보면 콘솔에 데이터가 제대로 찍히는것을 볼수가 있다.

추가로 validation에 실패하면 errors에 데이터가 들어가게 되고 위와같이 메세지를 남길수도 있다.

심플하네?! .. 이제 onsubmit에 들어온 데이터를 backend에 api서버에 전송한후에 로그인처리를 해주면 되겠다.
로그인뿐만 아니라.. 다른 입력폼관련해서도 이용하면 편하겠다.

오늘은 여기까지하고 다음시간에 로그인처리후에 과정을 기록하도록 하겠다.

 

https://github.com/jaden2dev/spring-jwt-react/tree/feat/3