react hook form 사용 이유

• react hook from이 자동화

input 값 다룰 때 useState( )로 일일이 관리하면 코드 복잡 → react hook form 입력값 등록(register)하면 자동화

• input 필드 손 쉽게 관리

register( )로 input 등록 시 useState( ) 생성 필요 없음

handleSubmit( )가 폼 제출 시 호출되어 모든 입력값을 한 번에 데이터로 받음

• 백엔드와 통신(예: MongoDB)을 단순화해 개발 빠르게 함

회원가입 기능 분석

<aside> ✏️

• Signup 컴포넌트를 열고 Signup API를 연결

데이터베이스에서 응답이 올 때까지 이 login 함수가 기다리도록 하기 위함

• React에서 Signup 페이지를 열기
• 사용자 입력(fullName, email, password)을 받기
• 백엔드의 Signup API로 보내 DB에 저장 </aside>

회원가입 기능 구현 코드

import { Link, useLocation, useNavigate } from "react-router-dom";
import Login from "./Login";
import { useForm } from "react-hook-form";
import axios from "axios";
.
.
.
function Signup() {
  const location = useLocation();
  const form = location.state?.from?.pathname || "/";
  const navigate = useNavigate();
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = async (data) => {
    const userInfo = {
      // Hook Form에서 받은 폼 값 - data
      fullname: data.fullname,
      email: data.email,
      password: data.password,
    };
    // 서버로 JSON 객체 전송
    await axios
      .post("<http://localhost:4001/users/signup>", userInfo)
      .then((res) => {
        console.log(res.data);
        if (res.data) {
          toast.success("Signup Successfully");
          navigate(form, { replace: true });
        }
        /* localStorage에 유저 정보 저장 - 페이지 이동해도 로그인 유지 위함
        localStorage는 문자열만 저장 가능. 객체 형태를 문자(JSON 형태)로 변환 */
        localStorage.setIsetItem("Users", JSON.stringify(res.data.user));
      })
      .catch((err) => {
        if (err.response) {
          console.log(err);
          toast.error("Error: " + err.response.data.message);
        }
      });
  };
  .
  .
  .

form 입력값 데이터 처리

1. React Hook Form에서 받는 모든 입력 값을 data 객체에 담김
2. API 요청 전에 다음처럼 정리해서 body로 보냄

✔️ 이 데이터는 이후 Axios로 Node.js (Express) 백엔드에 전송됨

const userInfo = {
  fullName: data.fullName,
  email: data.email,
  password: data.password,
};