React에서 useState를 활용한 간단한 회원가입 폼 만들기

이번에는 useState를 활용하여 이름과 성별을 입력받고, 제출 버튼을 누르면 입력된 값을 출력하는 간단한 회원가입 폼을 만들어보자

 

1. React에서 useState란?

useState는 함수형 컴포넌트에서 상태를 관리할 수 있도록 도와주는 React의 훅이다. 이 훅을 사용하면 입력값을 저장하고 변경할 수 있다.

 

---

 

2. 회원가입 폼 만들기

아래는 이름과 성별을 입력받는 폼을 구현한 코드이다.

import React, { useState } from "react";

const RegisterForm = () => {
    const [userName, setUserName] = useState("");
    const [userGender, setUserGender] = useState("남성");

    const handleNameChange = (e) => setUserName(e.target.value);
    const handleGenderChange = (e) => setUserGender(e.target.value);

    const handleFormSubmit = (e) => {
        e.preventDefault();
        alert(`이름: ${userName}, 성별: ${userGender}`);
    };

    return (
        <form onSubmit={handleFormSubmit}>
            <div>
                <label>이름: </label>
                <input type="text" value={userName} onChange={handleNameChange} />
            </div>
            <div>
                <label>성별: </label>
                <select value={userGender} onChange={handleGenderChange}>
                    <option value="남성">남성</option>
                    <option value="여성">여성</option>
                </select>
            </div>
            <button type="submit">가입하기</button>
        </form>
    );
};

export default RegisterForm;

 

---

 

3. 코드 설명

useState를 사용하여 상태 관리

• userName : 이름을 저장하는 상태
• userGender : 선택된 성별을 저장하는 상태

onChange 이벤트로 입력값 업데이트

• handleNameChange : 입력창에 이름을 입력하면 userName상태가 업데이트됨
• handleGenderChange : 성별을 선택하면 userGender 상태가 업데이트 됨

onSubmit이벤트로 데이터 처리

• 폼을 제출하면 handleFormSubmit 함수가 실행된다.
• alert을 통해 입력된 이름과 성별을 확인 가능
• e.preventDefault();로 기본 제출 동작을 막음