(JS) 구조 분해 할당

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

let a, b, rest;
[a, b] = [10, 20];

console.log(a);
// expected aoutput: 10;

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

let x = [1, 2, 3, 4, 5];

구조 분해 할당의 구문은 위와 비슷하지만, 대신 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의한다.

let x = [1, 2, 3, 4, 5];
let [y, z] = x;
console.log(y); // 1
console.log(z); // 2

변수 값 교환하기

하나의 구조 분해 표현식 만으로 두 변수의 값을 교환할 수 있다.
구조 분해 할당 없이 두 값을 교환하려면 임시 변수가 필요하다.

let a = 1;
let b = 3;

[a, b] = [b, a];
console.log(a); // 3
consolle.log(b) // 1

React Hook에서 배열 구조 분해

function ExampleWithManyStates() {
// 상태 변수를 여러 개 선언했습니다!
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
// ...
}
배열 구조 분해 문법은 useState로 호출된 state 변수들을 다른 변수명으로 할당할 수 있게 해준다. 이 변수명은 useState API와 관련이 없다. 대신에 React는 매번 렌더링할때 useState가 사용된 순서대로 실행할 것이다.