[React] 구조 분해 할당(Destructuring Assignment)

함수에 객체나 배열을 전달해야 할 일이 많음. 하지만 항상 전체 데이터를 사용할 필요는 없고, 일부 값만 필요한 경우도 있음.

이럴 때 유용한 게 바로 구조 분해 할당(destructuring assignment). 배열이나 객체에서 원하는 값만 쏙쏙 골라 변수로 저장 가능. 덕분에 코드도 깔끔해지고 가독성도 좋아짐.

---

1. 배열 분해하기

배열을 구조 분해 할당하면 특정 요소를 쉽게 변수에 담을 수 있음.

let arr = ["Bora", "Lee"];

// 구조 분해 할당을 이용한 변수 선언
let [firstName, surname] = arr;

console.log(firstName); // Bora
console.log(surname);  // Lee

위 코드에서 firstName 변수에는 arr[0], surname 변수에는 arr[1]이 들어감. 즉, 아래 코드와 같은 역할.

let firstName = arr[0];
let surname = arr[1];

특정 요소만 선택해서 가져올 수도 있음.

쉼표를 사용하여 요소 무시하기

필요 없는 배열 요소는 쉼표(,)로 건너뛸 수 있음.

let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

console.log(title); // Consul

위 코드에서는 두 번째 요소(Caesar)를 건너뛰고 title 변수에 세 번째 요소(Consul)가 들어감.

---

2. 모든 이터러블(iterable)에서 구조 분해 할당 사용 가능

배열뿐만 아니라 문자열, Set 등의 반복 가능한(iterable) 객체에서도 구조 분해 할당을 사용할 수 있음.

let [a, b, c] = "abc"; // ['a', 'b', 'c']
let [one, two, three] = new Set([1, 2, 3]);

console.log(a, b, c);   // a b c
console.log(one, two, three); // 1 2 3

이처럼 배열이 아닌 이터러블에서도 구조 분해 할당 활용 가능.

---

3. ‘…’로 나머지 요소 가져오기(Rest Operator)

배열의 앞쪽 값만 필요한 경우, 나머지 값들은 따로 배열에 저장 가능.

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

console.log(name1); // Julius
console.log(name2); // Caesar
console.log(rest);  // ['Consul', 'of the Roman Republic']

• name1과 name2에는 첫 번째와 두 번째 값이 저장됨.
• rest에는 나머지 요소들이 배열 형태로 저장됨.

⚠ 주의: ...rest는 반드시 마지막에 위치해야 함.

let [first, ...middle, last] = [1, 2, 3, 4]; // 오류 발생 ❌

위처럼 ...middle이 중간에 있으면 문법 오류 발생.

---

4. 객체에서 구조 분해 할당하기

객체에서도 구조 분해 할당 사용 가능. 객체의 속성을 개별 변수로 쉽게 추출 가능.

let user = {
    name: "John",
    age: 30
};

let { name, age } = user;

console.log(name); // John
console.log(age);  // 30

객체 구조 분해 할당에서는 변수 이름이 객체 속성 이름과 같아야 함. 다른 변수 이름을 쓰고 싶다면 : 사용하면 됨.

let { name: userName, age: userAge } = user;

console.log(userName); // John
console.log(userAge);  // 30

기본값 설정하기

기본값을 설정할 수도 있음.

let { name, age, job = "Unknown" } = { name: "John", age: 30 };

console.log(job); // Unknown (기본값 적용)

---

5. 나머지 패턴(객체에서 '…' 사용)

객체에서도 배열과 마찬가지로 나머지 패턴(...) 사용 가능.

let user = {
    name: "John",
    age: 30,
    job: "Developer"
};

let { name, ...rest } = user;

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

이렇게 하면 name 변수에는 John이 들어가고, rest에는 age와 job이 포함된 객체가 됨.

---

6. 함수 매개변수에서 구조 분해 할당 사용하기

함수의 매개변수로 객체나 배열을 전달할 때 구조 분해 할당 사용하면 편리함.

function showUser({ name, age }) {
    console.log(`이름: ${name}, 나이: ${age}`);
}

let user = { name: "Alice", age: 25 };
showUser(user); // 이름: Alice, 나이: 25

이렇게 하면 함수 내부에서 객체 속성을 직접 추출 가능. 코드가 훨씬 간결해짐.

---

마무리

구조 분해 할당을 활용하면 코드가 더 깔끔하고 직관적으로 변함. 배열, 객체, 함수 매개변수에서 적극적으로 활용하면 개발 속도도 올라가고 유지보수도 쉬워짐.

이제 실전에서 직접 활용해보길 바람.