[React JS] 리액트 | Deploy operator | 전개 연산자에 대해서 알아보자.

 

ES6의 전개 연산자(spread operator)는 독특하면서도 매우 유용한 문법 입니다. 전개 연산자는 나열형 자료를 추출하거나 연결할 때 사용합니다.

사용 방법은 배열이나 객체, 변수명 앞에 마침표 세 개(...)를 입력합니다. 다만, 배열, 객체, 함수 인자 표현식([], {}, 0) 안에서만 사용해야합니다.

ES6의 배열 전개 연산자 사용 방법 알아보기

E56 이전 문법에서는 배열의 일부 요소만 잘라내거나 연결하려면 배열 인덱스와 함께 배열 내장 함수들을 사용해야 했습니다.

다음은 기존 문법으로 배열의 일부 요소를 잘라내거나 연결한 예제입니다. 직접 실습해 보면 알겠지만 아래의 방법은 배열 내장 함수를 일일이 기억해야 하고 코드가 길어서 불편합니다.

1 var array1 = ['one', 'two'];
2 var array2 = ['three', 'four'];
3 var combined = [array1[0], array1[1], array2[0], array2[1]];
4 var combined = array1.concat(array2);
5 var combined = [].concat(array1, array2);
6 var first = array1[0];
7 var second = array1[1];
8 var three = array1[2] || 'empty';

10 function func() {
11  var args = Array.prototype.slice.call(this, arguments);
12  var first = args[0];
13  var others = args.slice(1);
}

세번째 줄 : 배열의 각 요소를 추출하여 새로운 배열을 만들었습니다.
네, 다섯번째 줄 : concat() 함수로 두 배열을 합쳤습니다.
여섯번째 줄 : 인덱스로 배열 요소를 추출했습니다.
여덟번째 줄 : || 연산자와 조합하면 추출할 배열 요소가 없을 때 기본값을 지정할 수 있습니다.

func 함수에서 : 특수 변수(arguments)를 사용해 함수 내 인자 항목들을 배열로 변환하였습니다. (func(a, b, c))에 args[0]은 a, args[1]은 b, args[2]는 c항목으로 각각 할당됩니다).

열 세번째 줄 : 인덱스 범위에 해당하는 배열 요소를 추출합니다. 여기서는 args.length가 전체 배열의 길이이므로 인
덱스 범위 1번(두 번째 항목)부터 마지막 항목까지 추출됩니다.

이제 위의 코드에 ES6의 전개 연산자를 도입해 보겠습니다. 전개 연산자를 도입하니 코드가 아주 간결해졌지요.

---

var array1 = ['one', 'two'];
var array2 = ['three', 'four'];
var combined = [...array1, ...array2];
// combined = ['one', 'two', 'three', 'four'];
var [first, second, three = 'empty', ...others] = array1;
// first = 'one', second = 'two', three = 'empty', others = []

function func(...args) {
  var [first, ...others] = args;
}

function func(first, ...others) {
  var firstInES6 = first;
  var othersInES6 = others;
}

// 올바르지 못한 예
// var wrongArr = ...array1;

3줄 : 두 배열 항목을 전개 연산자로 합쳤습니다.

5줄 : first, second array1의 각 위치에 있는 요소를 추출했습니다.

5줄 : three에 기본값과 함께 배열 요소를 추출했습니다.

5줄 : frist에서 three까지 추출하고 남은 요소를 추출했습니다.

8줄 : 함수 인자 배열을 args 변수에 할당했습니다.
마지막 줄 : 전개 연산자를 배열 표현식 없이 사용한 잘못된 예제입니다.

---

ES6의 객체 전개 연산자 사용 방법 알아보기
객체도 배열과 마찬가지로 전개 연산자를 사용할 수 있습니다. 이전에는 객체의 카나 값을 추출할 때 객체 내장 함수를 사용했습니다.

---

var objectOne = { one: 1, two: 2, other: 0 }; 
var objectTwo = { three: 3, four: 4, other: -1 };

var combined = { //키에 해당하는 값을 추출
  one: objectOne.one,
  two: objectOne.two,
  three: objectTwo.three,
  four: objectTwo.four,
};
var combined = Object.assign({}, objectOne, objectTwo);
//객체 내장 함수 assign()을 사용하여 두 객체를 병합했습니다. assign()의 첫 번째 인자는 결과로 반환 
//할 객체이며({}), 나머지 인자는 병합할 객체입니다. 이때 병합할 객체는 앞에 있는 객체부터 덮어씁니다.
//objectTwo의 값으로 덮어씁니다. 

// combined = { one: 1, two: 2, three: 3, four: 4, other: -1}
var combined = Object.assign({}, objectOne, objectTwo);
//중복되는 키값이 있으면 이후에 전달된 객체(objectOne)의 값으로 덮어씁니다. 

// combined = { one: 1, two: 2, three: 3, four: 4, other: 0}
var others = Object.assign({}, combined);
//삭제 연산자(delete)를 사용하여 특정 데이터를 추출한 다음 새로운 객체를 만들었습니다.
delete others.other;

 

ES6의 전개 연산자를 사용하면 위의 코드를 간결하게 바꿀 수 있다.

var combined = {
  ...objectOne,
  ...objectTwo,
};

// combined = { one: 1, two: 2, three: 3, four: 4, other: -1} 
var combined = {
  ...objectTwo,
  ...objectOne,
};

//두 객체를 병합할 때 중복된 기값들은 마지막에 사용한 객체의 값으로 덮어씁니다. 

// combined = { one: 1, two: 2, three: 3, four: 4, other: 0}
var { other, ...others } = combined;
// others = { one: 1, two: 2, three: 3, four: 4}
//객체에서 특정값을 추출할 때는 추출하려는 키 이름(other)을 맞추고 나머지는 전개 연산자로 선언된! 변 
수(others)에 할당할 수 있습니다.