자바스크립트 ES6 부터 추가된 ... Spread 연산자는 배열, 문자열, 객체 등 반복 가능한 객체를 개별 요소로 분리할 수 있다. MDN 문서를 살펴보면

전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다.

이와 같이 설명되어 있는데, 대충이런거구나는 알아도 정확히 이해가 되지 않는다. 여러 예제를 통해 알아보자.

const arr = [1, 2, 3, 4, 5, 6];

console.log(arr)
//(6) [1, 2, 3, 4, 5, 6]
console.log(...arr)
//1 2 3 4 5 6

이와 같이 배열이었던 arr 이 하나하나의 객체로 변경되었다. 이를 이용해 배열을 복사할 수 도 있는데 리액트 사용시 불변성을 유지하기 위반 방법으로도 많이 사용된다.

const arr1 = [1,2,3]
const arr2 = [...arr1,4,5]

console.log(arr1);
//(3) [1, 2, 3]
console.log(arr2)
//(5) [1, 2, 3, 4, 5]