React 구조분해할당(Destructuring assignment)

구조분해할당(Destructuring assignment)은 객체나 배열의 속성 또는 요소를 간단하고 직관적으로 추출하여 변수에 할당할 수 있게 해주는 JavaScript의 문법입니다. 이를 사용하면 코드의 가독성과 효율성을 높일 수 있습니다.

1. 배열 구조분해할당

배열의 요소를 변수로 쉽게 추출할 수 있습니다.

const array = [1, 2, 3];

// 구조분해할당
const [a, b, c] = array;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

기본값 설정

배열의 값이 없을 경우 기본값을 설정할 수 있습니다.

const array = [1];

const [a, b = 10] = array;

console.log(a); // 1
console.log(b); // 10

나머지 연산자 사용

const array = [1, 2, 3, 4];

const [a, ...rest] = array;

console.log(a); // 1
console.log(rest); // [2, 3, 4]

---

2. 객체 구조분해할당

객체의 속성을 변수로 쉽게 추출할 수 있습니다.

const obj = { name: 'Alice', age: 25 };

// 구조분해할당
const { name, age } = obj;

console.log(name); // Alice
console.log(age); // 25

변수 이름 변경

추출한 값을 다른 변수 이름으로 저장할 수 있습니다.

const obj = { name: 'Alice', age: 25 };

const { name: userName, age: userAge } = obj;

console.log(userName); // Alice
console.log(userAge); // 25

기본값 설정

const obj = { name: 'Alice' };

const { name, age = 30 } = obj;

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

---

3. 함수 매개변수에서 사용

함수의 매개변수에서도 구조분해할당을 사용할 수 있습니다.

function greet({ name, age }) {
  console.log(`Hello, ${name}. You are ${age} years old.`);
}

const user = { name: 'Bob', age: 30 };
greet(user); // Hello, Bob. You are 30 years old.

---

Key Insights
배경 지식 없이 구조분해할당(Destructuring assignment) 소스를 보면,
일반적인 Program 언어에 없던 특징이라,,, 낯설고,,, 파괴(?)적인.
React 소스에 함수 매개변수로 구조분해할당을 많이 사용