11. forms

-forms?

텍스트 입력 뿐만 아니라 체크박스나 셀렉트 등 사용자가 무언가 선택해야하는 모든 것.

= 사용자로부터 입력을 받기 위해서 사용

 

-controlled component

사용자가 입력한 값에 접근하고 제어할 수 있도록 해주는 컴포넌트. = 값이 리액트의 통제를 받는 input form element

function NameForm(props){
	const [value, setValue] = useState('');
    
    const handleChange = (event) => {
    	setValue(event.target.value);
    }
    
    const handleSubmit = (event) => {
    	alert('입력한 이름:' + value);
        event.preventDefault();
    }
    
    return(
    	<form onSubmit={handleSubmit}>
        	<label>
            	이름:
                <input type="text" value={value} onChange={handleChange} />
            </label>
        </form>
    );
}

예시 - setValue를 이용해 값을 state에 저장

 

-실습

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}>
            <label>
                이름 :
                <input type="text" value={name} onChange={handleChangeName} />
            </label>
            <button type="submit">제출</button>
        </form>
    );
}

export default SignUp;

Signup.jsx

 

(index.js 생략)

 

가장 기본 모습이며 이름을 입력하고 제출을 누르면 alert 창이 뜨며 사용자가 적은 이름을 보여준다.

이제 여기에 성별 필드를 추가한다. 

 

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}>
            <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;

Signup.jsx