Destructuring Assignment

구조분해할당(Destructuring Assignment)

배열(array)이나 객체(object)의 속성을 해체해서 각각 변수에 담을 수 있게 하는 JS 표현식. ES6부터 적용되었다.

기존에 다음과 같이 표현되던 식을

let arr1 = [1, 2, 3, 4];
let a = arr1[0];
let c = arr1[2];
console.log(a); // 1
console.log(c); // 3

구조분해할당을 이용하면 다음과 같이 표현이 가능하다.

let arr1 = [1, 2, 3, 4];
let [a, ,c] = arr1;
console.log(a); // 1
console.log(c); // 3

여기서 , 다음 바로 ,을 쓴 것은 1번째 index는 건너뛰고 2번째 인덱스에 c를 할당한다는 의미이다.

react-hook 중 하나인 useState도 이 구조분해할당을 이용한다.

const [pet, setPet] = useState("푸딩")