전체 흐름 순서대로 설명

1. 사용자 진입: /user/register 페이지

export const RegisterPage = () => {
  return (
    <MainLayout>
      <div id="user">
        <Register />
      </div>
    </MainLayout>
  );
};

• 사용자가 회원가입 페이지에 접근하면 RegisterPage가 먼저 실행됩니다.
• 이 페이지는 MainLayout이라는 공통 레이아웃으로 감싸져 있고, 내부에 Register 컴포넌트를 렌더링합니다.

2. Register 컴포넌트 렌더링

export const Register = () => {
  const [user, setUser] = useState({ ...initState });
  ...
  return (
    <section className="register">
      <form onSubmit={submitHandler}>...</form>
    </section>
  );
};

• 컴포넌트가 실행되면서 user라는 상태 변수가 초기화됩니다.

• initState 객체에는 아이디(uid), 비밀번호(pass), 이름(name), 주소(addr1, addr2) 등 모든 입력 필드 초기값이 담겨 있어, 각 input 요소와 연결됩니다.

  ---

3. 사용자 입력

<input
  type="text"
  name="uid"
  value={user.uid}
  onChange={changeHandler}
/>

• 사용자가 input에 값을 입력하면 onChange={changeHandler} 이벤트 발생

const changeHandler = (e) => {
  e.preventDefault();
  setUser({ ...user, [e.target.name]: e.target.value });
};

• 예: uid 입력 시 setUser({ ...user, uid: e.target.value }) 형태로 user 상태가 갱신됨.
• 이렇게 모든 입력 필드는 하나의 user 상태에 통합 저장됨.

4. "회원가입" 버튼 클릭 → form onSubmit

<form onSubmit={submitHandler}>
  ...
  <input type="submit" value="회원가입" className="btn btnRegister" />
</form>