구조분해할당이란?

ES6 버전에서 나온 구조분해할당이란 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JS 표현식이다.

배열 구조 분해 예시

예제 코드 1

let data = ["one", "two", "three"]

// 구조 분해 할당을 통해 데이터를 다시 담아보자.
[하나, 둘, 셋] = data
console.log(하나) // "one"
console.log(둘) // "two"
console.log(셋) // "three"

예제 코드 2

// 이러한 방식도 가능하다.
const [a, b] = [1, 2]

console.log(a) // 1
console.log(b) // 2

예제 코드 3

// 스프레드 연산자를 활용한 방식
let a, b, rest

[a, b] = [10, 20]

[a, b, ...rest] = [10, 20, 30, 40, 50]

console.log(a) // 10
console.log(b) // 20
console.log(rest) // [30, 40, 50]

객체 및 배열 리터럴 표현식을 사용하면 쉽게 데이터 뭉치를 만들 수 있다.

즉 a[0], b[0] 과 같이 쓸 필요없이 직접 설정한 변수를 쓰면 되는 것이다.

React Hooks 중에서 useState() 방식과 같은 것을 알 수 있다.
const [test, setTest] = useState("") 와 같이 useState는 함수이며 그 결과값은 배열로 나온다.
이것을 풀어쓰면,
const test = useState("")[0] const setCount = useState("")[1] 와 같은 형태가 되는 것이다.
useState에 대한 자세한 설명은 Docs를 참조하자.
https://ko.reactjs.org/docs/hooks-state.html

객체 구조 분해 예시

객체 형태도 물론 편리하게 사용할 수 있다.

예제 코드 4

let profile = { name:"철수", age:8 }

그전의 방식으로는 객체 안의 값을 참조하기 위해서는 profile.name / profile.age 와 같이 참조하였다. 하지만 객체의 깊어질수록 .을 붙여서 접근하기에는 귀찮고 가독성이 떨어진다.

예제 코드 5

const { name, age } = profile

console.log(name) // "철수"
console.log(age) // 8

위와 같이 객체의 key로 바로 접근할 수 있다. 깊이가 깊어져도 바로 참조할 수 있으니 편리하고 가독성도 높아진다.

예제 코드 6

const {name:이름, age:나이} = profile
console.log(이름) // "철수"
console.log(나이) // 8

name, age라는 이름 대신 다른 것도 사용할 수 있다.

---

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