스프레드(spread)와 레스트(rest) 연산자란 무엇인가요?

Question

Accepted Answer

둘 다 `...`을 사용하지만 **반대 방향**으로 동작합니다: 스프레드는 컬렉션을 개별 항목으로 **펼치고**, 레스트는 항목들을 하나의 배열/객체로 **모읍니다**.

## 스프레드 — 펼치기

```js
const a = [1, 2], b = [3, 4];
const merged = [...a, ...b];          // [1, 2, 3, 4]
const copy = [...a];                   // 얕은 복사
const obj = { ...user, active: true }; // 객체 복사 + 필드 덮어쓰기/추가
Math.max(...[1, 5, 3]);                // 5 — 배열을 인수로 펼침
```

## 레스트 — 모으기

```js
function sum(...nums) {     // 모든 인수를 배열로 모음
  return nums.reduce((a, n) => a + n, 0);
}
sum(1, 2, 3);               // 6

const [first, ...others] = [10, 20, 30]; // first=10, others=[20, 30]
const { id, ...rest } = user;            // id를 빼내고 나머지는 유지
```

## 중요한 세부사항: 스프레드는 얕은(shallow) 복사다

```js
const original = { user: { name: "Ann" } };
const copy = { ...original };
copy.user.name = "Bob"; // ⚠️ original.user.name도 함께 변경됨 — 중첩 객체는 공유됨
```

스프레드는 최상위 레벨만 복사하며, 중첩 객체는 여전히 공유 참조입니다. 상태 업데이트에서는 보통 최상위 레벨만 변경하므로 괜찮지만, 깊은 구조에서는 주의해야 합니다.

## 왜 중요한가

스프레드는 React/Redux에서 **불변 업데이트**(복사 + 변경)를 수행하는 표준 방식이며, 레스트는 가변 인자 함수와 "나머지를 한꺼번에 잡는" 구조 분해를 깔끔하게 만들어 줍니다.