[JS] 전개연산자 ...

전개 연산자(Spread Operator, ...)란?

배열, 객체, 함수 인자 등을 펼쳐서 개별 요소로 분해하는 JavaScript 문법

배열과 객체를 쉽게 복사하거나, 새로운 값을 추가하여 확장할 수 있다.

---

1. 배열에서의 전개 연산자

배열의 요소를 개별적으로 펼쳐서 새로운 배열을 만들거나, 기존 배열을 확장할 때 사용된다.

(1) 배열 복사 ( 얕은 복사 )

전개 연산자를 사용하면 원본 배열을 변경하지 않고 새로운 배열을 만들 수 있다.(배열 안에 객체/ 중첩 배열 제외)

arr2 = arr1 을하면 같은 배열을 참조하지만, ...arr1을 사용하면 새로운 배열이 생성된다.

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // arr1을 복사

console.log(arr2); // [1, 2, 3]
console.log(arr1 === arr2); // false (서로 다른 배열)

 

배열 안에 객체 또는 중첩 배열이 있는 경우, 전개 연산자는 내부 참조를 유지하는 얕은 복사를 수행한다.

객체/배열 내부 값이 같은 참조를 공유하므로, 복사한 객체/배열을 수정하면 원본도 영향을 받는다.

 

배열/객체의 내부 요소를 완전히 복사하려면 깊은 복사(Deep Copy)를 해야 한다.

• structuredClone()
• JSON.parse(JSON.stringify())

---

(2) 배열 합치기 (배열 병합)

여러 개의 배열을 쉽게 합칠 수 있다.

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

const merged = [...arr1, ...arr2];

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

(3) 새로운 요소 추가

배열의 중간이나 앞, 뒤에 새로운 요소를 쉽게 추가할 수 있다.

기존 배열을 변경하지 않고, 새로운 배열을 만들기 때문에 불변성을 유지할 수 있다.

const numbers = [2, 3, 4];

// 배열 앞에 추가
const newNumbers1 = [1, ...numbers];
console.log(newNumbers1); // [1, 2, 3, 4]

// 배열 뒤에 추가
const newNumbers3 = [...numbers, 5];
console.log(newNumbers3); // [2, 3, 4, 5]

---

2. 객체에서의 전개 연산자

객체의 속성을 개별적으로 펼쳐서 새로운 객체를 만들거나, 기존 객체를 확장할 때 사용된다.

(1) 객체 복사( 얕은 복사 )

객체를 복사할 때도 ...을 사용할 수 있다.

const obj1 = { name: "Alice", age: 25 };
const obj2 = { ...obj1 };

console.log(obj2); // { name: "Alice", age: 25 }
console.log(obj1 === obj2); // false (서로 다른 객체)

(2) 객체 확장 (새로운 속성 추가)

기존 객체의 속성을 유지하면서 새로운 속성을 추가할 수 있다.

const user = { name: "Bob", age: 30 };

// 새로운 속성 추가
const updatedUser = { ...user, job: "Developer" };

console.log(updatedUser);
// { name: "Bob", age: 30, job: "Developer" }

---

 

리액트에서 전개 연산자(...) 사용

1. 상태(state) 업데이트 시 객체/배열을 변경할 때
2. props 전달 시 여러 개의 값을 한 번에 넘길 때
3. 배열/객체 병합 및 복사 시 기존 데이터를 유지하면서 새로운 값을 추가할 때

리액트에서 ...은 상태를 안전하게 업데이트하고, props를 깔끔하게 전달하는 데 필수적인 도구다.