React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다.
비 구조화 할당(=구조 분해 할당)
배열과 객체에서 원하는 값을 더 빠르고 쉽게 가져올 수 있는 방법이다.
한 배열이 있을 때 그 배열의 값을 모두 출력하고 싶을 땐 어떻게 하는 게 좋을까?
let arr =["one", "two", "three"];
let one = arr[0];
let two = arr[1];
let three = arr[2];
console.log(one, two, three); // one two three위와 같은 방법도 쓸 수야 있겠지만 배열의 요소가 많을 수록 입력해야 할 코드량이 많아진다.
let arr =["one", "two", "three"];
let [one, two, three] = arr;
console.log(one, two, three); // one two three위의 코드를 줄여보았다. 두 번째 코드의 의미는 배열 안에 변수를 선언하고 arr에 있는 index 순서대로 변수가 담긴 배열에 할당한다. 이런 방식은 배열의 기본 변수 비 구조화 할당 혹은 배열의 비 구조화 할당이라 한다.
코드를 더 극한으로 줄여보자.
let [one, two, three] = ["one", "two", "three"];
console.log(one, two, three); // one two three아예 첫 번째 줄에 있던 변수에 배열을 할당하지 않고 선언을해도 위의 코드와 똑같이 동작한다. 이 방법을 배열의 선언 분리 비 구조화 할당이라 한다. 명칭까지는 다 외울 필요 없고 이런 방법으로도 배열을 만질 수 있구나 하면 된다.
만약에 앞부분 배열에 요소가 더 많으면 어떻게 될까? 당연한 말이지만 앞부분의 배열 요소가 더 많아 저장될 값이 없으면 undefined로 출력이 된다. undefined가 보기 싫고, 저장되어야 할 값이 없는 경우에 기본 값을 설정하고 싶으면 다음과 같이 작성하면 된다.
let [one, two, three, four="four"] = ["one", "two", "three"];
console.log(one, two, three, four); // one two three four
이런 배열의 비 구조화 할당은 어떤 경우에 사용하면 좋을까?
우리가 흔히 알고 있는 변수의 스왑을 떠올려보자.
let a = 10;
let b = 20;
let temp = 0;
temp = a;
a = b;
b = temp;
console.log(a, b); // 20 10고작 변수의 값을 서로 바꿀 뿐인데 이렇게 긴 코드가 필요하다. 배열의 비 구조화 할당을 이용하면 이런 스왑 코드를 파격적으로 짧게 만들 수 있다.
let a = 10;
let b = 20;
[a, b] = [b, a];
console.log(a, b); // 20 10
이번엔 객체의 비 구조화 할당에 대해 알아보자.
let object = { one:"one", two:"two", three:"three"};
let one = object.one;
let two = object.two;
let three = object.three;
console.log(one, two, three); // one two three제일 쉬운 방법으로 객체의 모든 프로퍼티 값을 가져왔다. 이 코드 역시 배열의 비 구조화 할당과 비슷하게 작성하면 된다.
let object = { one:"one", two:"two", three:"three"};
let {one, two, three } = object;
console.log(one, two, three); // one two three배열의 비 구조화 할당과 비슷하게 생겼다. 그래도 나름 배열과 객체라 차이점이 있는데 배열에서는 index 값으로 요소에 접근하지만 객체는 Key를 이용해서 프로퍼티에 접근한다. 즉 객체에서의 순서는 상관없다.
여기서 약간의 문제는 객체는 key 값으로 접근하기 때문에 변수명이 key 값으로 강제되는 면이 있다.
let object = { one:"one", two:"two", three:"three", name:"홍길동"};
let {name:myName, one, two, three } = object;
console.log(myName, one, two, three);참고로 배열 비 구조화 할당과 마찬가지고 변수에 저장될 값이 없으면 undefined가 출력되며 객체에서도 기본값을 정할 수 있다.
이런 비 구조화 할당은 리액트에서 많이 사용되므로 숙지하는 게 좋다.