배열 state 업데이트

• JavaScript에서 배열은 변경 가능하지만, state에 저장할 때는 변경이 불가능한 것으로 취급해야 한다.

• 객체와 마찬가지로, state에 저장된 배열을 업데이트하려면, 새로운 배열을 만들고(또는 기존 배열을 복사본으로 만들고) 새 배열을 사용하도록 state를 설정해야한다.

1. mutation 없이 배열 업데이트하기
• JavaScript에서 배열은 객체의 또 다른 종류일 뿐이다.
• 객체와 마찬가지로, React state의 배열은 읽기 전용으로 취급해야 한다.
• filter(), map()과 같은 메서드를 호출해서 새 배열을 만들면 된다.

import { useState } from 'react';

let nextId = 0;

export default function List() {
  const [name, setName] = useState('');
  const [artists, setArtists] = useState([]);

  return (
    <>
      <h1>Inspiring sculptors:</h1>
      <input
        value={name}
        onChange={e => setName(e.target.value)}
      />
      <button onClick={() => {
        artists.push({
          id: nextId++,
          name: name,
        });
      }}>Add</button>
      <ul>
        {artists.map(artist => (
          <li key={artist.id}>{artist.name}</li>
        ))}
      </ul>
    </>
  );
}