푸쉬() vs 콘캣()

push()

arr.push([element1[, ...[, elementN]]])
push는 기존 배열에 값을 추가하여 원본을 바꾼다.

const arr = [3, 6];
arr.push(9);
console.log(arr); // [3, 6, 9]

위의 코드에서처럼 arr 배열에 push(9)를 하고 arr을 확인하면 arr의 원본 자체가 변경된 것을 확인할 수 있다.

concat()

array.concat([value1[, value2[, ...[, valueN]]]])
concat은 기존의 배열은 바뀌지 않고 기존 배열을 토대로 변경한 새로운 배열이 리턴된다.

const arr =[3, 6];
let result = arr.concat(9);
console.log(arr); // [3, 6]
console.log(result); // [3, 6, 9]

위의 코드에서 알수 있듯이 result라는 변수에 concat(9)를 하고 arr을 확인하면 기존 배열값은 변하지 않은 것을 확인할 수 있고, result를 확인해보면 원본 배열 arr에 9가 추가된 값이 나오는 것을 확인할 수 있다.

차이점

성능적으로 차이를 봤을 때 push() 함수가 concat() 함수보다 빠르다. 이때문에 같은 목적으로 이용할 경우 예를 들면 배열의 뒤에 요소를 추가하여 새로운 배열을 만드는 경우(but, 원본 배열이 변환되도 상관 없는 경우)에는 push() 함수를 사용하는 것이 더 나을수도 있다.

BUT react에서 사용할때

react에서 state에 새로운 값을 추가할 때 push()와 concat() 메서드 중 어떤 메서드를 사용해야 할지 이것저것 찾아보다가 정리를 하게 되었다.
결론은, state에 값을 추가할 때는 push와 같은 원본 데이터를 변경하는 메서드를 사용하는 것보다는 원본 배열은 건드리지 않고 원본 배열에 새로운 데이터를 추가하여 새로운 배열을 리턴하는 concat과 같은 메서드를 사용하는 것이 추후에 성능 개선에도 더 좋고 코드 수정할때도 더 편하다.