React에서 배열의 반응형 연산

이제 배열 요소에 대한 반응형 조작을 하는 방법을 배워봅시다. 이를 위해 각 li에 이벤트 핸들러를 첨부하고, 그 핸들러에 이 li의 배열 내 인덱스를 매개변수로 전달할 것입니다:

function App() {
	const [notes, setNotes] = useState([1, 2, 3, 4, 5]);
	
	const result = notes.map((note, index) => {
		return <li key={index} onClick={() => doSmth(index)}>
			{note}
		</li>;
	});
	
	return <div>
		<ul>
			{result}
		</ul>
	</div>;
}

우리 함수 내부에서는 배열 요소에 대해 어떤 연산이든 수행할 수 있습니다:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // 요소에 무언가를 수행함
		setNotes(copy);
	}
}

숫자 배열이 주어집니다. 이를 ul 목록 형태로 출력하세요. 어떤 li를 클릭하면 해당 숫자를 제곱하세요.

각 li의 끝에 버튼을 만들고, 클릭 시 해당 li가 목록에서 삭제되게 하세요.

인풋이 주어집니다. 어떤 li를 클릭하면 해당 li의 텍스트가 인풋에 들어가게 하세요.

이전 문제를 수정하여, 인풋에서 포커스를 잃으면 변경된 텍스트가 해당 li에 반영되게 하세요.

버튼이 주어집니다. 이 버튼을 클릭하면 li의 순서를 역순으로 뒤집으세요.