Destructuring

Destructuring은 객체 혹은 배열의 속성의 값들을 개별 변수에 담게 해주는 표현식이다. ES6에 새로 추가 되었다고 한다.

let a, b;
[a, b] = [100, 1000];

console.log(a)   --> 100
console.log(b)   --> 1000

let c, d;
[c, d, ...나머지] = [100, 1000, 10000, 100000, 1000000]

console.log(나머지);  -->[ 10000, 100000, 1000000 ]

배열에서 이용할 때는 위와 같이, 나머지를 이용해 분해하고 남은 부분을 하나의 변수에 할당할 수 있다. 또한, 쉽게 데이터 뭉치를 생성할 수도 있다.

({ a, b } = { a: 10, b: 100 });
console.log(a); --> 10
console.log(b); --> 100

({c, d, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(c);  -->30
console.log(d);  -->40
console.log(rest);  -->{ a: 10, b: 20 }

let object = {e: 42, f: true};
let {e: hello, f: hi} = object;

console.log(hello); --> 42
console.log(hi); --> true

객체에서도 사용 가능하며, 각각의 변수에 맞는 값을 할당할 수 있고, 마지막처럼 객체의 원래 속성명과는 다른 이름의 변수에 할당하는 것도 가능하다.

useState에서의 Destructuring

리액트에서 쓰이는 문법인 useState에서 다음과 같은 문법을 사용할 수 있다.

let [a,b] = useState('선릉역 맛집 추천')

그러면 각각 a라는 변수에는 state의 데이터가 담기게 되고, b라는 변수에는 state 데이터 변경 함수가 담기게 된다.