구조분해할당

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

• 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 부냏해 할당할지 정의함

배열 구조 분해

var foo = ["one", "two", "three"];

var [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

객체 구조 분해

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true

자주보이는 문법!

함수 매개변수로 전달된 객체에서 필드 해체하기

function userId({id}) {
  return id;
}

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

var user = {
  id: 42,
  displayName: "jdoe",
  fullName: {
      firstName: "John",
      lastName: "Doe"
  }
};

console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"

• userId(user)을 실행하면 user정보가 모두 userId 함수로 매개변수로 넘어간다.
• userId에서는 user 정보 중에서 {id}부분만 구조분해 할당해서 대입한다.
• 즉, {id} === user.id인 것이다.

=> react에서 자식 컴포넌트로 데이터를 보낼 때 주로 구조분해할당으로
받아왔는데 매우 생경했다. 오늘 이렇게 보니 이해가 된다 :-) 많은 데이터를 한번에 넘기는 것이 아니라, 그 중에서 필요한 것만 쏙 뽑아서 매개변수로 전달했던 것!

출처 : MDN > 구조분해할당