React에서 배열의 반응형 연산

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

jsxfunction 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>;
}

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

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

Задание 1

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

Задание 2

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

Задание 3

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

Задание 4

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

Задание 5

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