React, SignUp, 폼 만들기

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); // 입력된 값을 name 상태로 업데이트
    };

    const handleChangeGender = (event) => {
        setGender(event.target.value); // 선택된 값을 gender 상태로 업데이트
    };

    const handleSubmit = (event) => {
        alert(`이름: ${name}, 성별: ${gender}`); // 알림창으로 상태를 보여줌
        event.preventDefault(); // 폼 제출로 인한 페이지 새로고침 방지
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>
                이름:
                <input
                    type="text"
                    value={name} // name 상태와 연결
                    onChange={handleChangeName} // 값이 변경되면 handleChangeName 호출
                />
            </label>
            <br />
            <label>
                성별:
                <select
                    value={gender} // gender 상태와 연결
                    onChange={handleChangeGender} // 값이 변경되면 handleChangeGender 호출
                >
                    <option value="남자">남자</option>
                    <option value="여자">여자</option>
                </select>
            </label>
            <br />
            <button type="submit">제출</button>
        </form>
    );
}

export default SignUp;

 

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

import SignUp from "./chapter_11/SignUp.jsx";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
    <React.StrictMode>
        <SignUp />
    </React.StrictMode>
);

reportWebVitals();

// https://github.com/soaple/first-met-react-practice-v18/tree/master/src

 

결과

출처

https://www.inflearn.com/course/처음-만난-리액트

https://github.com/soaple/first-met-react-practice-v18/tree/master/src