한 입 크기로 잘라먹는 리액트Table Of Contents
구조 분해 할당(Destructuring Assignment)은 말뜻 그대로 구조를 분해해 할당하는 문법입니다. 배열이나 객체에서 요소를 해체해 개별 변수에 그 값을 담을 때 사용합니다.
배열의 구조 분해 할당
다음은 배열에서 값을 하나씩 변수에 할당하는 예입니다.
코드를 불러오는 중 입니다 ...구조 분해 할당하면 코드를 다음과 같이 간결하게 작성할 수 있습니다.
코드를 불러오는 중 입니다 ...① 배열 arr의 값을 순서대로 변수 one, two, three에 할당합니다. 변수 one에는 배열 arr의 인덱스 0번 요소, 변수 two에는 1번 요소, 변수 three에는 2번 요소가 각각 저장됩니다.
배열을 구조 분해 할당하면, 저장된 요솟값을 변수 선언과 동시에 순서대로 할당합니다.
이번에는 3개 요소로 이루어진 배열에서 0과 1번 인덱스의 요소만 구조 분해 할당해 변수에 저장하겠습니다.
코드를 불러오는 중 입니다 ...배열의 길이와 할당할 변수의 개수가 일치하지 않아도 오류가 발생하지 않습니다. 배열의 구조 분해 할당 에서는 대괄호 속에서 선언한 변수만큼 순서대로 할당할 뿐 입니다.
이번에는 배열의 길이보다 할당할 변수의 개수가 더 많은 경우입니다.
코드를 불러오는 중 입니다 ...할당할 변수의 개수가 배열의 길이보다 많아도 오류가 발생하지 않습니다. 다만 배열의 길이를 넘는 변수에는 undefined가 할당됩니다. undefined는 오류의 주범이므로 항상 주의해야 합니다.
객체의 구조 분해 할당
배열뿐만 아니라 객체도 구조 분해 할당이 가능합니다. 3개의 프로퍼티가 있는 객체를 생성하고 구조 분해 할당으로 프로퍼티의 value를 변수에 할당하겠습니다.
코드를 불러오는 중 입니다 ...객체를 구조 분해 할당할 때는 데이터 저장 순서가 아니라 key를 기준으로 합니다. 변수 name, age, location에는 person 객체 프로퍼티의 value가 key를 기준으로 각각 할당됩니다.
함수의 매개변수가 객체일 때 구조 분해 할당하기
이번에는 객체 프로퍼티를 매개변수로 저장하는 함수에서 구조 분해 할당하겠습니다.
코드를 불러오는 중 입니다 ...함수 func에서는 전달된 객체에서 프로퍼티의 value를 매개변수 name, age, location에 각각 구조 분해 할당합니다. 객체를 전달할 때 이 문법을 함수의 매개변수에 적용하면, 필요한 프로퍼티만 전달할 수도 있어 코드가 훨씬 더 유연해집니다.
이번에는 구조 분해 할당하면서 동시에 변수 이름도 변경하겠습니다.
코드를 불러오는 중 입니다 ...객체의 구조 분해 할당 과정에서 매개변수의 이름을 새롭게 바꿀 수 있습니다. 변수 이름 옆에 콜론
:과 함께 새 변수명을 쓰면, 새 이름으로 값이 할당됩니다.