구조 분해 할당(Destructuring assignment)

팀원 중 한명이 버튼컴포넌트를 담당하였는데, 여러가지 상황에서 쓰이는 공통컴포넌트다 보니 매개변수가 엄청나게 많아 지는 상황이 발생하였다. 멘토님께서 구조 분해 할당을 공부해서 적용해보라는 조언을 해주셔서 자세히 알아보았다.

const SelectedButton = ({ clicked, checked, id, ...props }) => {

모든 상황에서 꼭 들어가는 매개변수만 적어주고(clicked, checkd, id) 나머지 기타 상황에서 필요한 매개변수는 ' . . . props'로 대체해 준 코드이다.

 

구조 분해 할당

객체와 배열은 자바스크립트에서 가장 많이 쓰이는 자료 구조이다.

 

키를 가진 데이터 여러 개를 하나의 엔티티에 저장할 땐 객체를, 컬렉션에 데이터를 순서대로 저장할 땐 배열을 사용한다. 개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 생긴다. 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생기기도 한다. 이럴 때 객체나 배열을 변수로 분해할 수 있게 해주는 구조 분해 할당을 사용할 수 있다. 이 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에서 구조 분해는 그 진가를 발휘한다.

 

 

배열 분해

let [firstName, surname] = []

alert(firstName); // undefined
alert(surname); // undefined

아래와 같이 기본값을 설정할 수도 있다.

// 기본값
let [name = "Guest", surname = "Anonymous"] = ["Julius"]

alert(name)    // Julius (배열에서 받아온 값)
alert(surname) // Anonymous (기본값)

 

 

객체 분해

let options = {
  title: "Menu",
  width: 100,
  height: 200
}
//  할당 연산자 우측엔 분해하고자 하는 객체를, 좌측엔 상응하는 객체 프로퍼티의 '패턴’을 넣는다. //
let {title, width, height} = options

alert(title)  // Menu
alert(width)  // 100
alert(height) // 200

아래와 같이 프로퍼티에 저장된 값이 상응하는 변수에 할당된 것을 확인 할 수있다.

let options = {
  title: "Menu",
  width: 100,
  height: 200
}

// { 객체 프로퍼티: 목표 변수 }
let {width: w, height: h, title} = options 

// width -> w
// height -> h
// title -> title

alert(title)   // Menu
alert(w)       // 100
alert(h)       // 200

 

 

 

중첩 구조 분해 (nested destructuring)

객체나 배열이 다른 객체나 배열을 포함하는 경우, 좀 더 복잡한 패턴을 사용하면 중첩 배열이나 객체의 정보를 추출할 수 있다. 이를 중첩 구조 분해라고 한다.

let options = {
  size: {
    width: 100,
    height: 200
  },
  items: ["Cake", "Donut"],
  extra: true
}

대입 연산자 좌측의 패턴은 정보를 추출하려는 객체 oprtions와 같은 구조를 갖추고 있다.

// 코드를 여러 줄에 걸쳐 작성해 의도하는 바를 명확히 드러냄
let {
  size: { // size는 여기,
    width,
    height
  },
  items: [item1, item2], // items는 여기에 할당함
  title = "Menu" // 분해하려는 객체에 title 프로퍼티가 없으므로 기본값을 사용함
} = options

alert(title)   // Menu
alert(width)   // 100
alert(height)  // 200
alert(item1)   // Cake
alert(item2)   // Donut

 

레퍼런스

https://velog.io/@oimne/Javascript-%EA%B5%AC%EC%A1%B0-%EB%B6%84%ED%95%B4-%ED%95%A0%EB%8B%B9

https://ko.javascript.info/destructuring-assignment

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment