리액트 ES6 문법 - 객체 확장 표현식과 구조 분해 할당

아래 책을 읽고 정리한 내용입니다.

https://m.yes24.com/Goods/Detail/87631428

Do it! 리액트 프로그래밍 정석 - 예스24

객체 확장 표현식과 구조 분해 할당

⇒ 객체나 배열의 특정값을 손쉽게 추출할 수 있는 표현식!

⇒ 배열이나 객체의 값을 해체하여 개별 변수에 할당하는 것

기존 자바스크립트의 객체 확장 표현식 사용 방법 알아보기

// ES5의 예
var x = 0;
var y = 0;

var obj = { x: x, y: y};

var randomKeyString = 'other';
var combined = {};
combined['one' + randomKeyString] = 'some value';

var obj2 = {
  methodA: function() { console.log('A'); },
  methodB: function() { return 0; },
};

• 기존은 객체 / 객체의 값 선언을 위해 키 이름과 값을 각각 할당했어야 함
  • var obj = { x: x, y: y};
• 연산 결과로 키값을 대입할 때는 키값을 따로 지정해줘야 함
  • combined['one' + randomKeyString] = 'some value';
• 객체에 함수를 추가할 때는 변수에 함수를 할당해야 함! → 개불편

ES6의 객체 확장 표현식 사용 방법 알아보기

// ES6의 예
var x = 0;
var y = 0;
var obj = { x, y };

var randomKeyString = 'other';
var combined = {
  ['one' + randomKeyString]: 'some value',
};

var obj2 = {
  x,
  methodA() { console.log('A'); },
  methodB() { return 0; },
};

• 키 값을 생략하면 자동으로 키의 이름으로 키값을 지정함!
  • var obj = { x, y };
• 객체 생성 블록 안에 대괄호를 사용해 표현식을 작성하면 추가해줌
  • ['one' + randomKeyString]: 'some value',
• function() 키워드 생략 가능

기존 자바스크립트의 구조 분해 사용 방법 알아보기

// ES5 예제
var list = [0,1];
var item1 = list[0];
var item2 = list[1];
var item3 = list[2] || -1;

var temp = item2;
item2= item1;
item1 = temp;

var obj = {
  key1: 'one',
  key2: 'two',
};

var key1 = obj.key1;
var key2 = obj.key2;
var key3 = obj.key3 || 'default key3 value';
var newKey1 = key1;

• 배열 인덱스를 사용해 변수에 할당 → 당연한 거 아니냐
  • var item1 = list[0];
• 논리 연산자를 사용해 배열의 해당 인덱스에 값이 없으면 기본 값으로 할당
  • var item3 = list[2] || -1;
• 배열의 두 값을 치환할 수 있음!
• 객체의 키값을 변수에 할당!
  • var key1 = obj.key1;
• 나머진 똑같

ES6의 구조 분해와 구조 할당 사용 방법 알아보기

// ES6 예제
var list = [0, 1];
var [
  item1,
  item2,
  item3 = -1,
] = list;
[item2, item1] = [item1, item2];

var obj = {
  key1: 'one',
  key2: 'two',
};
var {
  key1: newKey1,
  key2,
  key3 = 'default key3 value',
} = obj;

• 대괄호 블록 사이에 추출하고자 하는 값의 인덱스 위치에 변수를 배치!
• 선언 부호(=)를 변수와 함께 사용하여 기본값을 할당!
  • item3 = -1, / key3 = 'default key3 value',
• 콜론 부호(:)와 함께 새 변수명을 선언 후 바로 할당 가능
  • key1: newKey1,
• 구조 할당은 전개 연산자를 함께 사용한다!
• ES6의 구조 분해와 구조 할당은 함수 인잣값을 다루거나 JSON 데이터를 변환할 때 사용하는 중요한 녀석임

var [item1, ...otherItems] = [0, 1, 2];
var { key1, ...others } = { key1: 'one', key2: 'two' };
// otherItems = [1, 2]
// others = { key2: 'two' }