state를 바꿀때 push 대신 구조분해를 쓰는 이유

상태를 직접 변경할 수 없기 때문에 단순히 항목을 배열로 푸시 할 수 없습니다
=> React 상태를 직접 수정하려고했기 때문

불변성유지

state 내부의 값을 직접적으로 수정하면 안되는 것

왜 push가 아닌 concat을 써야하나(혹은 구조분해할당)

var array1 = [0,1,2,3,4];
var array2 = array1;
array2.push(5);
// array1 === array2
// array1 0,1,2,3,4,5
// array2 0,1,2,3,4,5

array1와 array2가 동일한 주소를 가리키고 있기 때문에
내부의 값이 변경되었을지 몰라도, 레퍼런스가 가리키는 곳은 동일하기 때문에, 똑같은 값으로 인식 (array2 === array1) 하여 리 렌더링을 하지 않게 됩니다

var array1 = [0,1,2,3,4];
var array2 = array1;
var array3 = array2.concat(5);
// array1 = 0,1,2,3,4
// array3 = 0,1,2,3,4,5

concat의 경우 동일한 주소를 가리키지 않기 때문에 내부의 값이 변경되는 것과 레퍼런스가 가리키는 곳은 동일하지 않기 때문에, 똑같은 값으로 인식 (array2 !== array1) 은 안하고 리 렌더링을 하게 됩니다

출처

링크