React에서 입력 필드를 배열에 바인딩하기

상태에 notes 배열이 저장되어 있다고 가정합시다:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	return <div>
		
	</div>;
}

또한 배열 요소의 합을 구하는 헬퍼 함수가 있다고 가정합시다:

function getSum(arr) {
	let sum = 0;
	
	for (const elem of arr) {
		sum += +elem;
	}
	
	return sum;
}

function App() {
	...
}

우리 상태 배열의 요소 합계를 찾아서 해당 헬퍼 함수를 사용하여 출력해 봅시다:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	return <div>
		{getSum(notes)}
	</div>;
}

이제 세 개의 입력 필드를 만들고 각 입력 필드의 value에 배열의 요소 중 하나를 넣어 봅시다:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	return <div>
		<input value={notes[0]} />
		<input value={notes[1]} />
		<input value={notes[2]} />
		
		{getSum(notes)}
	</div>;
}

이제 입력 필드에 onChange 이벤트를 추가해 봅시다. 이때 하나의 공통 이벤트 핸들러 함수를 만듭니다:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	function changeHandler(index, event) {
		// 공통 이벤트 핸들러 함수
	}
	
	return <div>
		<input value={notes[0]} onChange={event => changeHandler(0, event)} />
		<input value={notes[1]} onChange={event => changeHandler(1, event)} />
		<input value={notes[2]} onChange={event => changeHandler(2, event)} />
		
		{getSum(notes)}
	</div>;
}

보시다시피, changeHandler 함수는 첫 번째 매개변수로 해당 입력 필드가 편집하는 배열 요소의 인덱스를 받습니다.

이 인덱스를 사용하여 배열 요소를 입력 필드의 내용으로 바꿀 수 있습니다.

이를 구현해 봅시다:

function changeHandler(index, event) {
	setNotes([...notes.slice(0, index), event.target.value, ...notes.slice(index + 1)]);
}

이제 어떤 입력 필드든 편집할 수 있으며, 배열이 반응적으로 변경되고 그에 따라 요소들의 합계가 다시 계산됩니다.

전체 코드를 한데 모아 봅시다:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	function changeHandler(index, event) {
		setNotes([...notes.slice(0, index), event.target.value, ...notes.slice(index + 1)]);
	}
	
	return <div>
		<input value={notes[0]} onChange={event => changeHandler(0, event)} />
		<input value={notes[1]} onChange={event => changeHandler(1, event)} />
		<input value={notes[2]} onChange={event => changeHandler(2, event)} />
		
		{getSum(notes)}
	</div>;
}

입력 필드가 반복문에서 생성되도록 할 수도 있습니다:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	function changeHandler(index, event) {
		setNotes([...notes.slice(0, index), event.target.value, ...notes.slice(index + 1)]);
	}
	
	const result = notes.map((note, index) => {
		return <input
			key={index}
			value={note}
			onChange={event => changeHandler(index, event)}
		/>;
	});
	
	return <div>
		{result}
		{getSum(notes)}
	</div>;
}

다음 배열이 주어져 있습니다:

[1, 2, 3, 4, 5, 6, 7, 8, 9]

이 배열 요소들의 산술 평균을 화면에 출력하세요. 반복문을 사용하여 요소를 편집할 수 있는 입력 필드를 만드세요.