[React] Form을 통해 사용자 정보 입력 받기

 

✔ 사용자 이름 받기

• src > chapter_11 > SignUp.jsx

import React, { useState } from "react";

function SignUp(props) {
    const [name, setName] = useState("");

    const handleChangeName = (event) => {
        setName(event.target.value);
    };

    const handleSubmit = (event) => {
        alert(`이름: ${name}`);
        event.preventDefault();
    };

    return (
        <form onSubmit={handleSubmit} style={{ margin: 10 }}>
            <label style={{ margin: 10 }}>
                이름:
                <input type="text" style={{ margin: 10 }} value={name} onChange={handleChangeName} />
            </label>
            <button type="submit" style={{ margin: 10 }}>제출</button>
        </form>
    );
}

export default SignUp;

 

• index.js 수정 후, npm start

이름을 입력해서 제출하면 알림이 뜬다.

 

 

 

 

✔ 사용자 성별 필드 추가하기

• src > chapter_11 > SignUp.jsx

import React, { useState } from "react";

function SignUp(props) {
    const [name, setName] = useState("");
    const [gender, setGender] = useState("남자");

    const handleChangeName = (event) => {
        setName(event.target.value);
    };

    const handleChangeGender = (event) => {
        setGender(event.target.value);
    };

    const handleSubmit = (event) => {
        alert(`이름: ${name}, 성별: ${gender}`);
        event.preventDefault();
    };

    return (
        <form onSubmit={handleSubmit} style={{ margin: 10 }}>
            <label style={{ margin: 10 }}>
                이름:
                <input type="text" style={{ margin: 10 }} value={name} onChange={handleChangeName} />
            </label>
            <br />
            <label style={{ margin: 10 }}>
                성별:
                <select style={{ margin: 10 }} value={gender} onChange={handleChangeGender}>
                    <option value="남자">남자</option>
                    <option value="여자">여자</option>
                </select>
            </label>
            <button type="submit" style={{ margin: 10 }}>제출</button>
        </form>
    );
}

export default SignUp;

 

• index.js 수정 후, npm start

이름 적고 성별 선택해서 제출하면 알림이 뜬다.