🚀 JavaScript 구조 분해 할당(Destructuring Assignment) 정리

구조 분해 할당(Destructuring Assignment)이란?
객체나 배열에서 원하는 데이터만 쉽게 추출하여 변수에 할당할 수 있는 문법

1️⃣ 객체(Object)에서 구조 분해 할당

const user = {
  name: "곽래희",
  age: 25,
  job: "개발자",
};

// 구조 분해 할당 사용
const { name, age } = user;

console.log(name); // "곽래희"
console.log(age); // 25

✅ 객체에서 특정 키(name, age)만 선택해서 변수로 바로 사용 가능!
✅ user.name 대신 name을 직접 사용 가능

2️⃣ 배열(Array)에서 구조 분해 할당

const colors = ["red", "green", "blue"];

// 첫 번째, 두 번째 요소만 가져오기
const [firstColor, secondColor] = colors;

console.log(firstColor); // "red"
console.log(secondColor); // "green"

✅ 배열에서 원하는 요소만 쉽게 가져올 수 있음
✅ colors[0] 대신 firstColor를 직접 사용 가능

3️⃣ 함수 매개변수에서 구조 분해 할당

function printUser({ name, job }) {
  console.log(`이름: ${name}, 직업: ${job}`);
}

const user = { name: "곽래희", age: 25, job: "개발자" };

printUser(user);
// 출력: 이름: 곽래희, 직업: 개발자

✅ 함수의 매개변수에서 특정 값만 추출하여 사용 가능
✅ props.name처럼 접근하지 않고, name을 바로 사용 가능

4️⃣ React에서 구조 분해 할당 활용 (props)

// ❌ 구조 분해 할당 없이 props 사용
function Profile(props) {
  return <h1>{props.name}의 직업은 {props.job}입니다.</h1>;
}

// ✅ 구조 분해 할당 적용
function Profile({ name, job }) {
  return <h1>{name}의 직업은 {job}입니다.</h1>;
}

// 사용
<Profile name="곽래희" job="개발자" />

✅ React에서 props를 더 간결하게 사용할 수 있음!

📌 결론

구조 분해 할당을 사용하면 "객체나 배열에서 특정 데이터를 쉽게 꺼내어 변수로 사용할 수 있다!"
코드를 더 간결하고 가독성 좋게 만들 수 있다.
React에서 props를 다룰 때 자주 사용된다!
🔥 즉, 원하는 데이터를 자동으로 뽑아서 사용하기 위해 사용한다! 🚀