React Hook Form과 커스텀 Hook으로 회원가입 폼 구현하기

전체 흐름 먼저 이해하기

1. 사용자가 이메일, 비밀번호 입력
   ↓
2. react-hook-form이 입력값 관리
   ↓
3. 제출 버튼 클릭
   ↓
4. 유효성 검사 (빈 값 체크)
   ↓
5. API 호출로 회원가입
   ↓
6. 성공하면 알림 띄우고 로그인 페이지로 이동

---

1. React Hook Form이란?

"폼 관리를 쉽게 해주는 라이브러리"

기존 방식 (useState 사용)

// 귀찮음!
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [emailError, setEmailError] = useState("");
const [passwordError, setPasswordError] = useState("");

const handleEmailChange = (e) => {
  setEmail(e.target.value);
  // 유효성 검사 코드...
};

const handlePasswordChange = (e) => {
  setPassword(e.target.value);
  // 유효성 검사 코드...
};

문제점:

• 입력값마다 state 필요
• 에러 상태도 따로 관리
• 코드 길고 복잡함

React Hook Form 방식

const { register, handleSubmit, formState: { errors } } = useForm<SignupProps>();

장점:

• 코드 짧음
• 유효성 검사 자동
• 성능 좋음 (리렌더링 최소화)

---

2. useForm 분석

const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm<SignupProps>();

register

"이 input을 react-hook-form이 관리하게 해줘"

<InputText
  placeholder="이메일"
  inputType="email"
  {...register("email", { required: true })}
/>

해석:

• register("email"): 이 input의 name을 "email"로 등록
• { required: true }: 필수 입력값
• {...register()}: input에 필요한 props 자동 연결

실제로는 이렇게 변환됨:

<input
  name="email"
  ref={...}
  onChange={...}
  onBlur={...}
/>

handleSubmit

"폼 제출 처리해줘"

<form onSubmit={handleSubmit(onSubmit)}>

동작 순서:
1. 사용자가 제출 버튼 클릭
2. handleSubmit이 유효성 검사 실행
3. 에러 있으면 → errors에 저장, 제출 안 함
4. 에러 없으면 → onSubmit 함수 실행

errors

"어떤 input에 에러가 있는지 알려줘"

{errors.email && (
  <p className="error-text">이메일을 입력해주세요.</p>
)}

의미:

• errors.email이 있으면 (= email이 비어있으면)
• 에러 메시지 표시

---

3. useNavigate

"다른 페이지로 이동시켜줘"

const navigate = useNavigate();

// 사용
navigate("/login");  // /login 페이지로 이동

Link vs navigate:

// Link: 클릭할 버튼/텍스트가 있을 때
<Link to="/login">로그인하기</Link>

// navigate: 코드에서 자동으로 이동시킬 때
if (회원가입성공) {
  navigate("/login");  // 자동 이동
}

---

4. useAlert (커스텀 Hook)

const showAlert = useAlert();

// 사용
showAlert("회원가입이 완료되었습니다.");

커스텀 Hook이란?

• 직접 만든 Hook
• 반복되는 로직을 재사용하기 위해 만듦

useAlert 내부는 아마 이렇게 생김:

// hooks/useAlert.ts
export function useAlert() {
  return (message: string) => {
    alert(message);  // 또는 토스트 메시지
  };
}

---

5. 전체 코드 흐름 분석

1) 폼 초기 설정

const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm<SignupProps>();

• SignupProps 타입으로 폼 데이터 타입 지정
• email, password 필드 관리 준비

2) Input 등록

<InputText
  placeholder="이메일"
  inputType="email"
  {...register("email", { required: true })}
/>

• register로 input 연결
• required: true로 필수값 지정

3) 에러 표시

{errors.email && (
  <p className="error-text">이메일을 입력해주세요.</p>
)}

• errors.email이 있으면 에러 메시지 표시
• 사용자가 빈 값으로 제출하면 나타남

4) 제출 처리

<form onSubmit={handleSubmit(onSubmit)}>

• handleSubmit이 유효성 검사
• 통과하면 onSubmit 함수 실행

5) API 호출

const onSubmit = (data: SignupProps) => {
  signup(data).then((res) => {
    showAlert("회원가입이 완료되었습니다.");
    navigate("/login");
  });
};

data 내용:

{
  email: "user@example.com",
  password: "1234"
}

동작:
1. signup(data): API 호출
2. .then(): 성공하면
3. showAlert(): 알림 표시
4. navigate(): 로그인 페이지로 이동

---

6. useState를 안 쓰는 이유

주석 처리된 코드

// const [email, setEmail] = useState("");
// const [password, setPassword] = useState("");

왜 안 쓰냐?

• react-hook-form이 대신 관리해줌
• 코드 간결
• 성능 더 좋음

---

7. 타입 정의

export interface SignupProps {
  email: string;
  password: string;
}

의미:

• 회원가입 폼 데이터 구조 정의
• TypeScript가 타입 체크해줌

사용 위치:

useForm<SignupProps>()  // 폼 타입 지정
onSubmit(data: SignupProps)  // 파라미터 타입 지정

---

8. 실제 동작 시뮬레이션

시나리오 1: 빈 값 제출

1. 사용자가 아무것도 입력 안 하고 제출
   ↓
2. handleSubmit이 유효성 검사
   ↓
3. required: true 위반 감지
   ↓
4. errors.email = true, errors.password = true
   ↓
5. 에러 메시지 표시 (onSubmit 실행 안 됨)

시나리오 2: 정상 제출

1. 사용자가 이메일, 비밀번호 입력
   ↓
2. 제출 버튼 클릭
   ↓
3. handleSubmit이 유효성 검사 (통과)
   ↓
4. onSubmit 함수 실행
   ↓
5. signup API 호출
   ↓
6. 성공하면 알림 + /login으로 이동

---

정리

React Hook Form

• 폼 상태 관리 라이브러리
• register: input 등록
• handleSubmit: 제출 처리
• errors: 에러 상태

useNavigate

• 페이지 이동 Hook
• 코드에서 자동 이동시킬 때 사용

useAlert (커스텀 Hook)

• 알림 표시용 Hook
• 재사용 가능한 로직

전체 흐름

1. react-hook-form으로 폼 관리
2. 유효성 검사 자동
3. API 호출
4. 성공시 알림 + 페이지 이동

"폼 만들 땐 react-hook-form 쓰면 편함!"