구조 분해 할당

배열이나 객체의 속성을 분해해서 그 값을 변수!에 담을 수 있게 하는 표현식

배열 구조 분해

let [x, y] = [1, 2]
console.log(x) // 1
console.log(y) // 2

let users = ['a', 'b', 'c']
let [user1, user2, user3] = users
위 코드는
let user1 = users[0]
let user2 = users[1]
let user3 = users[2]
와 같다.
console.log(user1) // 'a'
console.log(user2) // 'b'
console.log(user3) // 'c'

let str = "Mike-Tom-Jane"
let [user1, user2, user3] = str.split('-')
console.log(user1) // 'Mike'
console.log(user2) // 'Tom'
console.log(user3) // 'Jane'
도 가능

배열 구조 분해: 기본값 (값이 undefined일 경우에만 기본값이 적용된다는 것을 기억하자.)

let [a, b, c] = [1, 2] 여기서 만약 c가 undefined일 경우
let [a=3, b=4, c=5] = [1, 2]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

배열 구조 분해: 일부 반환값 무시

let [user1 , , user2] = ['a', 'b', 'c', 'd']
console.log(user1) // 'a'
console.log(user2) // 'c'

위처럼 공백과 쉼표를 이용해서 필요하지 않은 요소를 무시할 수도 있다.

배열 구조 분해: 바뀌치기

let a= 1
let b = 2
a와 b의 값을 바꿔치기 하고 싶다고 해보자.

let c= a //c에 a를 잠시 저장해두고(c는 필요하진 않고 임시 변수임)
a = b //b를 a로 옮기고
b= c //임시로 저장했던 c의 값을 b로 옮긴다.

위의 복잡한 과정을 구조분해를 이용하면 간단하게 해결할 수 있다.
[a, b] = [b, a]

객체 구조 분해 (배열과는 다르게 순서를 신경쓰지 않아도 된다.)

let user = {name: 'Mike', age: 30}
let {name, age} = user
여기서 위 코드는
let name = user.name
let age = user.age
와 같다.
console.log(name) //'Mike'
console.log(age) //30

let {name: userName, age: userAge} = user

위처럼 이름을 바꿀 수도 있다. 한 컴포넌트에 useSWR을 두 개 선언하는 등의 경우에 유용.

스프레드를 사용해 객체 안의 속성만 빼올 수도 있다.

const user = {name: 'Mike', age: 30}
const copyUser = {...user} //스프레드 연산자를 통해 user의 속성을 깊은복사

객체 구조 분해: 기본값

let user = {name: 'Mike', age: 30}
let {name, age, gender} = user
여기서 만약 gender과 undefined 값이면
let {name, age, gender = 'male'} = user

이렇게 기본값을 사용해주면 된다.