[과제테스트] 회원가입, 로그인 페이지 (react-form-hook)

💻 들어가며

과제 전형을 진행하면서 제작했던 회원가입과 로그인 페이지입니다.

tailwind css와 react-hook-form 를 사용해서 제작했습니다.

레이아웃이 어떤식으로 잡혀있는지를 위주로 포스팅한 글이고

이후에 react-hook-form을 어떻게 사용했나 다룰 예정입니다 😀

---

⚒️ 기능 구현

회원가입 페이지

 

---

로그인 페이지

---

📌 핵심 코드

 <div className="flex flex-col items-center justify-center h-screen">
      <div className="m-auto">
        <h1 className="mb-2 text-lg font-medium">로그인</h1>
        <form className="flex flex-col" onSubmit={handleSubmit(onSubmit)}>
          <input
            placeholder="이메일"
            className="mb-1 p-1 border-2"
            type={"email"}
            {...register("email", { required: true, pattern: /^\S+@\S+$/i })}
          />
          <input
            placeholder="비밀번호"
            className="mb-1 p-1 border-2"
            type={"password"}
            {...register("password", { required: true, minLength: 8 })}
          />

          {errors && (errors.email || errors.password) && (
            <small className="text-red-400">잘못된 로그인 정보입니다.</small>
          )}

          <input
            disabled={loading}
            className="w-80 py-2 mb-1 font-bold text-white bg-gray-400 rounded cursor-pointer"
            type="submit"
          />
        </form>

        <small>
          아이디가 없으신가요?
          <Link href="/register">
            <a className="ml-1 text-blue-500">회원가입</a>
          </Link>
        </small>
      </div>
    </div>

• flex, justify-content : 가운데 맞춤
• h-screen : 꽉 찬 화면으로 구현
• m(margin), p(padding) : 간격조절

회원가입도 로그인 페이지와 비슷한 구성으로 작성되어 생략했습니다.

---

💭 느낀점

예전 수풀 프로젝트에서는 커스텀 훅을 사용해서 일일히 에러처리를 해주느라 시간을 꽤 잡아먹었는데

react-hook-form 을 사용해보니 각 input 마다 에러처리를 간편하게 할 수 있다는 점이 좋았습니다.

 

그리고 tailwind를 사용하면 태그에다 바로 스타일을 설정할 수 있다는 점은 간편했지만

기존 css 키워드와 달라 공식문서를 계속해서 확인해야하는 점과

재사용성이 떨어져서 코드가 난잡해지는 점 때문에

기존에 사용하던 styled-components를 계속해서 사용할 것 같습니다.

---

🎯TODO

1. 수풀 프로젝트 react-hook-form 리팩토링