소플의 처음 만난 리액트_실습9

소플의 처음 만난 리액트_실습9

---

폼이란?

- 사용자로부터 입력을 받기 위해 사용하는 양식

 

제어 컴포넌트

- 사용자가 입력한 값에 접근하고 제어할 수 있게 해주는 컴포넌트

- 값이 리액트의 통제를 받는 입력 폼 엘리먼트

 

...

 

<input type="file">

- 사용자가 파일을 선택할 수 있게 해주는 HTML태그

- 서버로 파일을 업로드하거나 자바스크립트의 File API를 사용해서 파일을 다룰 때 사용

- 읽기 전용이기 때문에 리액트에서는 비제어 컴포넌트가 됨

 

여러 개의 입력 다루기

- 컴포넌트에 여러 개의 state를 선언하여 각각 입력에 대해 사용하면 됨

 

input null value

- value prop은 넣되 자유롭게 입력할 수 있게 만들고 싶을 경우, 값이 undefined 또는 null을 넣으면 됨

---

사용자 정보 입력받기 실습

//SignUp.jsx

import React, { useState } from "react";

function SignUp(props) {
    const [name, setName] = useState("");
	
    const handleChangeName = (e) => {
        setName(e.target.value);
    };

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

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

입력 후 제출시 나타나는 alert 화면

 

//SignUp.jsx 수정

import React, {useState} from "react";

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

    const handleChangeName = (e) => {
        setName(e.target.value);
    };
    const handleChangeGender = (e) => {
        setGender(e.target.value);
    };

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

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

입력&선택 후 제출시 나타나는 alert 화면