배열에 새 항목을 추가할 때 배열의 push 함수를 사용하지 않고 concat을 사용했는데요. push 함수는 기존 배열 자체를 변경해 주는 반면, concat은 새로운 배열을 만들어 준다는 차이점이 있습니다.

리액트에서 상태를 업데이트할 때는 기존 상태를 그대로 두면서 새로운 값을 상태로 설정해야 합니다. 이를 불변성 유지라고 하는데요. 불변성 유지를 해 주어야 나중에 리액트 컴포넌트의 성능을 최적화할 수 있습니다. 이에 대한 자세한 내용은 이 책에서 추후 알아보겠습니다.

onClick 함수에서 새로운 항목을 추가할 때 객체의 id 값은 nextId를 사용하도록 하고, 클릭될 때마다 값이 1씩 올라가도록 구현했습니다. 추가로 button이 클릭될 때 기존의 input 내용을 비우는 것도 구현해 주었습니다.

코드를 다 작성했다면 파일을 저장하고 브라우저를 열어서 새로운 항목을 추가해 보세요.

▲ 그림 6-5 데이터 추가 기능 완성