TIL #52 | supabase로 로그인 & 회원가입 구현하기

이번에는 react-hook-form을 사용하여 로그인과 회원가입을 구성해보았다.

1) 컴포넌트 나누기
로그인과 회원가입 페이지를 따로 나눌까 하다가 일단 조건부 렌더링으로 로그인과 회원가입의 UI를 변경하는 것으로 구현해봤다.
<Auth /> 페이지 안에 <form /> 컴포넌트를 두고 로그인 또는 회원가입 string 값을 저장하는 useState를 만들어 Props로 넘겨주었다. <form /> 컴포넌트에서 props로 로그인과 회원가입 UI 전환을 해줄 수 있다.

import { useState } from "react";
import LoginForm from "../components/LoginForm/LoginForm";

const Auth = () => {
  const [mode, setMode] = useState("로그인");

  return (
    <div>
      <LoginForm mode={mode} setMode={setMode} />
    </div>
  );
};

export default Auth;

props를 type은 아래와 같이 지정해주었다.

interface SignFormProps {
  mode: string;
  setMode: React.Dispatch<React.SetStateAction<string>>;
}

const LoginForm: React.FC<SignFormProps> = ({ mode, setMode }) => {
...

2) react-hook-form 사용하여 유효성 검사 구현하기

mode를 사용해서 로그인과 회원가입 간의 화면을 전환해주었다.

        {mode === "로그인" ? (
          <>
            <Button
              type="primary"
              htmlType="submit"
              onClick={handleSubmit(signInHandler)}
            >
              로그인하기
            </Button>
            <button onClick={onClickHandler}>
              아직 계정이 없으신가요? 회원가입
            </button>
          </>
        ) : (
          <>
            <Button
              type="primary"
              htmlType="submit"
              onClick={handleSubmit(signUpHandler)}
            >
              회원가입하기
            </Button>
            <button onClick={onClickHandler}>
              이미 계정이 있으신가요? 로그인
            </button>
          </>
        )}