[JS] 스프레드 연산자

JavaScript에서 ... 연산자는 "Spread" 연산자라고 부릅니다. 이 연산자는 배열이나 객체 등의 iterable한 값들을 펼쳐서 개별 요소로 분리합니다. React에서는 주로 배열이나 객체를 복사하거나 합칠 때 많이 사용합니다.

배열에서의 사용 예시

const array1 = [1, 2, 3];
const array2 = [...array1, 4, 5]; // 결과: [1, 2, 3, 4, 5]

위의 코드에서 ...array1는 array1의 모든 요소를 개별적으로 분리합니다. 그리고 그 결과를 새 배열에 포함시킵니다.

객체에서의 사용 예시

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // 결과: { a: 1, b: 2, c: 3 }

위의 코드에서 ...obj1는 obj1의 모든 속성을 개별적으로 분리합니다. 그리고 그 결과를 새 객체에 포함시킵니다.

이 외에도 다른 방법으로 객체나 배열을 복사할 수 있습니다.

Object.assign 메서드: Object.assign 메서드를 사용하면 원본 객체를 수정하지 않고 새로운 객체를 생성할 수 있습니다.

const obj1 = { a: 1, b: 2 };
const obj2 = Object.assign({}, obj1, { c: 3 });  // 결과: { a: 1, b: 2, c: 3 }

여기서 첫 번째 인자 {}는 대상 객체(target object)입니다. 두 번째 인자 obj1의 모든 속성은 대상 객체에 복사되고, 세 번째 인자 { c: 3 }는 추가적인 속성을 제공합니다.

Array.prototype.slice 메서드: 배열의 경우 slice 메서드를 사용해서 복사본을 만들 수 있습니다.

const array1 = [1, 2, 3];
const array2 = array1.slice(); // 결과: [1, 2, 3]

slice 메서드는 원본 배열을 수정하지 않고 새로운 배열을 반환합니다. 인자를 전달하지 않으면 전체 배열을 복사합니다.

Array.prototype.concat 메서드: concat 메서드도 배열을 복사하는데 사용할 수 있습니다.

const array1 = [1, 2, 3];
const array2 = [].concat(array1); // 결과: [1, 2, 3]

concat 메서드는 원본 배열과 인자로 전달된 배열이나 값들을 합쳐서 새로운 배열을 반환합니다. 빈 배열에 원본 배열을 합치면 원본 배열의 복사본을 얻을 수 있습니다.

이런 방법들도 가능하지만, spread 연산자를 사용하면 가장 간결하고 직관적으로 복사를 수행할 수 있습니다.