[React] 배열 상태 관리

원칙적으로 리액트에서 가지고 있는 상태(state)는 불변성을 유지해야 한다!
만약 변경해야 한다면, 새로운 값, 새로운 배열, 새로운 객체로 만들어줘야 한다!

리액트에서는 object 내부의 값을 변경해도 UI상에 업데이트 되지 않는다!
객체를 만들면 이 객체마다 고유한 참조값이 만들어지는데, 리액트에서는 어떤 새로운 참조값이 만들어져야 '뭐가 변경됐네?' 하고 알아차린다.
그런데 참조값이 동일한 상태에서 아무리 값을 수정해봤자 리액트가 보기에는 동일한 객체로 간주해서 업데이트 되지 않기 때문에 업데이트를 원한다면 전체적인 객체를 새로 만들어서 새로운 참조값을 갖게 해야 한다!!

따라서 리액트에서 사용하는 모든 state는 불변성을 유지해야 한다!!

리액트에서 사용하는 상태, 객체나 배열의 내부 내용을 직접적으로 업데이트 하면 안되고, 변경이 발생한다면 객체와 배열의 전체적인 껍데기를 새로 만들어서 업데이트 해줘야 한다!