🔍 한눈에 알아보기

Forms

• 사용자로 부터 정보를 입력받기 위해 사용하는 양식

HTML과 React에서의 차이

• React에서는 component에서 state를 각각 관리 (controlled component)
• HTML에서는 element 내부에 각각의 state가 존재

HTML Form

// HTML form
<form>
	<label>
    	이름:
        <input type="text" name="name"/>
    </label>
    <label>
    	내용:
        <textarea name="content"></textarea>
    </label>
    <button type="submit">제출</button>
</form>

• 위 코드의 경우, <input>과 <textarea>에서 각각 자체적으로 state를 관리

Controlled component

• 값이 React의 통제를 받는 input form element
• 모든 데이터를 state에서 관리

// Controlled component
function NameForm(props) {
    const [formData, setFormData] = useState({name: '', content: ''});
    
    const handleChange = (event) => {
        const {name, value} = event.target;
        setFormData({ ...formData, [name]: value });
    }
    
    const handleSubmit = (event) => {
        alert(`name: ${formData.name} content: ${formData.content}`);
        event.preventDefault();
    }
    
    return(
    	<form onSubmit={handleSubmit}>
        	<label>
            	이름:
                <input type="text" name="name" value={formData.name} onChange={handleChange}/>
            </label>
            <label>
    			내용:
        		<textarea name="content" value={formData.content} onChange={handleChange}></textarea>
    		</label>
            <button type="submit">제출</button>
        </form>
    )
}

• 위 HTML form 코드와 동일한 기능을 하는 controlled component
• useState로 모든 state를 한 번에 관리