처음 만난 리액트 문서
11.6 여러 개의 입력 다루기
지금까지는 하나의 컴포넌트에서 하나의 입력만을 다뤘는데, 만약 하나의 컴포넌트에서 여러 개의 입력을 다루기 위해서는 어떻게 해야할까요? 이런 경우에는 여러 개의 state를 선언해서 각각의 입력에 대해 사용하면 됩니다. 아래 예시 코드를 한 번 보도록 하겠습니다.
function Reservation(props) {
const [haveBreakfast, setHaveBreakfast] = useState(true);
const [numberOfGuest, setNumberOfGuest] = useState(2);
const handleSubmit = (event) => {
alert(`아침식사 여부: ${haveBreakfast}, 방문객 수: ${numberOfGuest}`);
event.preventDefault();
}
return (
<form onSubmit={handleSubmit}>
<label>
아침식사 여부:
<input
type="checkbox"
checked={haveBreakfast}
onChange={(event) => {
setHaveBreakfast(event.target.checked);
}} />
</label>
<br />
<label>
방문객 수:
<input
type="number"
value={numberOfGuest}
onChange={(event) => {
setNumberOfGuest(event.target.value);
}} />
</label>
<button type="submit">제출</button>
</form>
);
}
위 코드는 Reservation이라는 이름을 가진 호텔예약을 위한 컴포넌트인데, 예약을 하기 위해 필요한 정보 두 가지를 입력받도록 되어 있습니다. 하나는 아침식사 여부이고, 다른 하나는 방문객 수 입니다. 아침식사 여부를 입력받기 위한 <input>태그는 type이 checkbox로 되어 있고, 값이 변경되면 setHaveBreakfast()함수를 통해 값을 업데이트 합니다. 그리고 방문객 수를 입력받기 위한 <input>태그는 type이 number로 되어 있고, 값이 변경되면 setNumberOfGuest()함수를 통해 값을 업데이트 합니다.
클래스 컴포넌트에서는 setState()함수 하나로 모든 state의 값들을 업데이트 했지만, 함수 컴포넌트에서는 각 state의 변수마다 set함수가 따로 존재하기 때문에 위와 같은 형태로 각각의 set함수를 사용해서 구현하면 됩니다.
마지막 업데이트: 2025년 08월 21일 09시 05분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page