폼이란?
- 리액트의 폼 = 사용자가 입력할 수 있는 데이터를 처리하는 방법.
- 사용자가 폼을 통해 입력한 데이터는 리액트 컴포넌트의 state에 저장되고, 이 state는 사용자의 입력에 따라 업데이트될 수 있다.
- 이렇게 폼은 사용자로부터 정보를 받아와서 애플리케이션에 반영하는 중요한 기능을 담당한다.
- 리액트스럽게 폼을 쓰는 방법을 익혀보자.
제어 컴포넌트
javascript
import React, { useState } from "react";
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>
<button type="submit">제출</button>
</form>
)
}
export default NameForm;
위의 코드에서 <input> 태그에 해당하는 부분을 제어 컴포넌트라고 한다.
javascript
<input type='text' value={value} onChange={handleChange}/>
여기서 요소는 value prop을 통해 state 변수 value의 값을 갖게 된다.
또한, onChange prop을 통해 handleChange 함수를 호출하여 사용자가 입력할 때마다 state가 업데이트되도록 합니다. 이렇게 하면 요소의 값이 항상 state와 동기화됩니다.
textarea 태그
javascript
...
return (
<form onSubmit={handleSubmit}>
<label>
요청사항:
<textarea value={value} onChange={handleChange}>
</label>
<button type="submit">제출</button>
</form>
)
...
- 긴 글을 작성할 때 주로 사용하는 태그
value의 props로value를 넣어줬기 때문에 처음 렌더링이 시작될 때부터