React - JavaScript 응용하기 (비 구조화 할당)

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서는 구조분해할당 혹은 비 구조화 할당(Destructuring Assignement) 라는 표현식을 알아보도록 하겠습니다.

이 응용방법은 배열이나 객체의 속성을 말 그대로 구조화 되어 있는 상태, 배열로 되어 있는 요소를 꺼내어 개별적으로 사용하거나, 객체의 속성을 개별적으로 사용하는 방법을 뜻합니다.

 

1. 배열 비구조화 할당

 

배열을 구조화 할당하는 코드는 간단하게 작성해볼 수 있습니다.

먼저 예제 코드를 작성해보도록 하겠습니다.

const ArrayA = [1, 2, 3, 4, 5, 6, 7, 8, 9];

let ArrayOne = ArrayA[0];
let ArrayTwo = ArrayA[1];
let ArrayThree = ArrayA[2];
let ArrayFour = ArrayA[3];

위의 요소들을 살펴보면 1~9까지의 요소가 존재하고, 이 요소를 각각의 ArrayOne~Four 에 인덱스를 사용하여 값을 개별적으로 담고 있습니다.

하지만 이는 단순히 반복하여 개별적으로 꺼내는 형태로 사용하고 있지만, 비 구조화할당을 사용하면 간편하게 꺼내어 사용할 수 있습니다.

이를 코드로 구현하면 아래와 같이 구현할 수 있습니다.

const ArrayA = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let [one, two, three, four, five, six, seven, eight, nine] = ArrayA;

console.log(one, two, three, four, five, six, seven, eight, nine);

 

이렇게 하면, 각각의 독립적인 요소로 간편하게 가져올 수 있게 됩니다.

하지만 모든 요소가 아니라, 일부의 요소만 가지고 나머지는 배열에 담아두고자 할 때는 아래와 같이도 작성할 수 있습니다.

const ArrayA = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let [one, two, three, four, five, ...rest] = ArrayA;

 

위의 코드에서는 기존에 전체를 작성한것에 반해, ...rest 라고 하는 "스프레드연산자"로 작성하여 1~5 까지는 요소를 각각 할당하고, 나머지 요소를 rest 라는 변수에 할당하는 코드가 됩니다.

이를 사용하여 필요한 요소만을 비구조화할당으로 사용하고, 나머지 요소를 스프레드연산자로 명명한 rest에 담아 효율적으로 코드를 작성할 수 있습니다.

 

비구조화 할당이라고 하여 꼭 모든 요소를 잘게 다지는(?) 처리를 할 필요는 없으니까요.

 

2. 객체 비구조화 할당 

 

배열의 비구조화 할당과 마찬가지로, 객체 역시도 유사한 방법으로 처리가 가능합니다.

이를 예제코드로 동일하게 설명해보도록 하겠습니다.

let obj = {
  one: 1,
  two: 2,
  three: 3,
};

let { one, two, three } = obj;
console.log(one, two, three);

위의 방식과 마찬가지로, 비구조화 할당을 사용하여, 위와 같이 작성하면, 간단하게 출력할 수 있습니다.

이를 이용하면 구조화되어 있는 객체, 배열을 손쉽게 추출하여 사용할 수 있습니다.

이 역시 스프레드 연산자를 사용하면 보다 다채롭게 사용할 수 있습니다.

let obj = {
  one: 1,
  two: 2,
  three: 3,
};

let { one, two, ...three } = obj;
console.log(one, two, three);

 

비구조화 할당의 다양한 사용은 이후 React 에서 실제 사용에서도 다루도록 하겠습니다.

 

감사합니다.