구조 분해(destructuring)란 무엇이며 무엇을 할 수 있나요?

Question

Accepted Answer

**구조 분해(destructuring)**는 배열의 값이나 객체의 속성을 단일하고 읽기 좋은 문장으로 별개의 변수에 풀어 담습니다.

```js
// 배열 구조 분해 (위치 기준)
const [first, second] = [10, 20];      // first=10, second=20
const [a, , c] = [1, 2, 3];            // 가운데 건너뛰기 → a=1, c=3

// 객체 구조 분해 (이름 기준)
const { name, age } = user;
const { name: userName } = user;        // 이름 변경 → userName
const { city = "Unknown" } = address;   // 없으면 기본값
```

## 강력한 패턴

```js
// 중첩
const { address: { city } } = user;

// 레스트 — 나머지를 잡기
const { id, ...rest } = obj;

// 기본값이 있는 함수 매개변수 (매우 흔함)
function createUser({ name, role = "user" } = {}) { ... }

// 임시 변수 없이 변수 교환
[x, y] = [y, x];
```

## 항상 보게 되는 곳

```js
// React
const [count, setCount] = useState(0);
function Card({ title, children }) { ... }

// import, API 응답
const { data, error } = await api.get("/users");
```

## 왜 중요한가

구조 분해는 보일러플레이트를 제거하고(`const name = user.name; const age = user.age;`가 한 줄이 됨), 함수 시그니처를 자기 문서화되게 만들며(어떤 props를 사용하는지 정확히 보임), 현대 JS, React, Node에서 관용적입니다.

기본값과 레스트 기능은 선택적/부분적 데이터를 깔끔하게 다루도록 해줍니다.