✔️ 구조분해할당이란?

구조분해할당은 객체나 배열같은 데이터 구조를 각각의 요소로 분해하여 개별 변수에 담는 과정을 말합니다. 즉 객체로 묶여있는 데이터 덩어리를 해체해서 필요한 부분을 가져올 수 있습니다. 일반적으로는 변수 선언과 동시에 이루어지며, 할당하려는 값이나 각각의 필드에 해당하는 변수를 지정하여 분해를 합니다.

✔️ 구조분해할당을 사용하는 이유

• 배열이나 객체와 같은 복합 데이터 구조를 다룰 때 유용합니다.
• 구조화된 데이터를 더 쉽게 접근하고 처리할 수 있습니다.

✔️ 구조분해할당 예시

UI에서 각각을 구성을 객체로 설계를 했다고 가정했을 때, 새로운 데이터가 추가 될 때 이미 만들어 놓은 객체에 원하는 요소가 맞게 들어가게 하려면 우선 그 객체를 해체해야합니다.
먼저 2가지 간단한 예시를 들어보겠습니다.

📌 javascript에서의 구조분해할당 예시

• 배열에서의 구조분해할당

const arr = [one,two,three];
const [a,b,c] = arr;

console.log(a); // one
console.log(b); // two
console.log(c); // three

위의 예시는 배열에서의 구조분해할당을 사용한 것 입니다.
배열 arr의 첫 번째 요소를 a, 두 번째 요소를 b, 세 번째 요소를 c에 나눠서 담았습니다.
이제 객체의 경우에서도 비슷한 방식으로 구조분해할당을 사용한 예시를 보여드리겠습니다.

• 객체에서의 구조분해할당

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

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

이 경우에는 객체 안의 key 값을 가져와 객체 안에 있는 key값의 이름으로 재할당 해 준 것입니다.
이런 경우만 있으면 이해하기 쉬울텐데 실제로는 이렇게 간단하게 구성할 의도로 UI를 구성하지 않습니다. 대부분은 아래 같은 구조로 만들어지는게 대부분인것 같습니다.

const data = [{
    id: ad@gmail.com,
    number : 0,
    page:1,
    content:"text",
    date: new Date()
}];

이런 경우 for of 반복물을 사용해서 구조를 분해하고 원하는 의도대로 사용할 수 있습니다.
mdn에도 잘 나와있습니다.

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" 

console.log("userId: " + userId(user)); 이 코드에서 콘솔 대신 input 필드를 사용해서 게시판 글의 양식처럼 추가 할 수도 있습니다. 물론 구조분해 방식이 이런 위에 있는 방식만 있는 것은 아닙니다.

마지막으로 배열을 구조분해할당할 때에는 순서가 중요하고,
객체를 구조분해할당할 때 순서는 상관없이 할당이 됩니다.