비구조화할당(구조분해할당)

📌 구조 분해 할당 이란?

구조 분해 할당은 쉽게 말해, 배열과 객체를 해체하여 안의 값을 사용 하는 것

다시말해 배열이나 객체의 구조를 분해하고 할당 하는 것

❓ 배열 구조 분해

배열을 만들었다.

let data = ["뚱이", "다람이", "징징이"]

구조 분해 할당을 통해 데이터를 다시 담는다.

[뚱, 다, 징] = data;
console.log(뚱) // "뚱이"
console.log(다) // "다람이"
console.log(징) // "징징이"

이런 경우도 가능함

const [a,b] = [1,2]
console.log(a) // 1
console.log(b) // 2

위 경우는 useState 에서 익숙히 본 모양

❓ 객체 구조 분해

객체를 만들었다.

let profile = {name: "뚱이", age: 11}

원래 사용했던 방식대로는 profile.name 과 profile.age 을 통해 필요한 값을 꺼내 왔다.

이 방식을 아래처럼 바꿔 사용하면 편하다

const {name, age} = profile
console.log(name) // "뚱이"
console.log(age) // 11

name 과 age 대신 다른 이름으로 사용도 가능하다

const {name:aaa, age:bbb} = profile
console.log(aaa) // "뚱이"
console.log(bbb) // 11

❓ 객체 구조 분해는 이미 사용하고 있었다.

query 로 데이터를 받아올 때

const {data} = useQuery()

❗️ useQuery 를 2번 써야하는 경우에는

const {data} = useQuery(fetch~~1)
const {data:DataTow} = useQuery(fetch~~2)

DataTow.fetch~~ 로
이름을 지정하여 받아올 수 있다.