React에서 객체 배열에 대한 반응형 연산

이제 객체 배열에 대한 반응형 연산을 만드는 방법을 배워봅시다. 이 경우, 우리가 무언가를 하려는 배열 요소의 id를 함수에 전달해야 합니다:

function App() {
	const [notes, setNotes] = useState(initNotes);
	
	const result = notes.map(note => {
		return <li key={note.id}>
			<span>{note.prop1}</span>
			<span>{note.prop2}</span>
			<span>{note.prop3}</span>
			
			<button onClick={() => doSmth(note.id)}>
				btn
			</button>
		</li>;
	});
	
	return <div>
		<ul>
			{result}
		</ul>
	</div>;
}

요소에 무언가를 하려면 먼저 전체 배열을 반복하여 찾아야 합니다:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				// 요소에 대해 무언가를 수행
			}
			
			return note;
		}));
	}
}

예를 들어 찾은 객체의 텍스트를 변경해 봅시다:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				note.prop1 += '!';
				note.prop2 += '!';
				note.prop2 += '!';
				
				return note;
			}
			
			return note;
		}));
	}
}

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

세 개의 입력 필드가 주어졌습니다. 각 li 끝에 버튼을 만들어, 클릭 시 해당 li 객체의 데이터가 해당 입력 필드에 표시되도록 하세요.

이전 작업을 수정하여 입력 필드 옆에 버튼을 배치하고, 클릭 시 입력 필드의 데이터가 해당 li에 반영되도록 하세요.