minstudio

구조 분해 할당 (Destructuring)

큰 선물 상자(객체/배열) 속에서 내가 원하는 물건만 변수라는 바구니에 쏙쏙 골라 담는 마법 같은 문법입니다. React에서 props나 useState를 다룰 때 숨 쉬듯이 사용하게 됩니다.

상자 풀기 (구조 분해) 시각화

user 객체
name: "민수"
age: 28
const { name, age } =
변수 name ("민수")
변수 age (28)
const user = {
    name: "민수",
    age: 28,
    job: "개발자"
};

// 과거의 방식: 객체에서 값을 하나씩 꺼내 변수에 담기 노가다
// const name = user.name;
// const age = user.age;

// ES6 구조 분해 할당: 객체 키 이름과 동일한 변수명으로 단번에 쏙 뽑아냄!
const { name, age, job } = user;

console.log(name); // "민수"
console.log(job); // "개발자"

// 배열도 순서대로 쏙 뽑아낼 수 있습니다.
const colors = ["Red", "Green", "Blue"];
const [firstColor, secondColor] = colors; // "Red", "Green"
실행 결과
구조 분해 할당 (Destructuring) | Minstudio