[실전 리액트 프로그래밍] ES6+ 문법

☑️ 객체와 배열의 사용성 개선

1) 단축 속성명(shorthand property name): 새로 만들려는 객체의 속성값 일부가 이미 변수로 존재하면 간단하게 변수 이름만으로 객체의 속성을 생성할 수 있다. 또한 단축 속성명은 콘솔 로그를 출력할 때 유리하다.

const age = 23;
const obj = {
  name: 'john',
  age
};

const name = 'mike';

console.log({name, age}) // { name: 'mike', age: 23 };

2) 계산된 속성명(computed property names): 객체의 속성명을 동적으로 결정하기 위해 나온 문법이다. 계산된 속성명은 다음과 같이 컴포넌트의 상탯값을 변경할 때 유용하게 쓸 수 있다.

const [count, setCount] = useState({
  count1: 0,
  count2: 0,
  count3: 0,
})

const handleClick = (key, value) => {
  setCount((prev) => {...prev, [key]: prev[key] + 1})
};

3)전개 연산자(spread operator): 배열이나 객체의 모든 속성을 풀어놓을 때 사용하는 문법이다. 배열의 경우, 전개 연산자를 사용하면 그 순서가 유지된다. ES5까지는 중복된 속성명을 사용하면 에러가 발생했지만 ES6부터는 중복된 속성명이 허용된다. 중복된 속성명 사용 시 최종 결과는 마지막 속성명의 값이 된다.

const arr1 = [1, 2];
const arr2 = [4, 5];

const newArr = [...arr1, 3, ...arr2]; // [ 1, 2, 3, 4, 5 ]

4) 배열 비구조화(array destructuring): 1)배열의 여러 속성값을 변수로 쉽게 할당할 수 있는 문법이다. 배열의 비구조화 시 기본값을 정의할 수 있는데 비구조화를 한 배열의 속성값이 undefined라면 정의된 기본값이 할당되고, 그렇지 않다면 원래 배열의 속성값이 할당된다. 2)배열의 비구조화를 사용하면 두 변수의 값을 쉽게 교환할 수 있다. 3) 배열에서 일부 속성값을 무시하고 진행하고 싶다면 건너뛰는 개수만큼 쉼표를 입력하면 된다. 4) 쉼표 개수만큼을 제외한 나머지를 새로운 배열로 만들수도 있다.

// 1)배열 비구조화: 기본값 할당
const tuple = ['name'];
const [key = 'name', value = 'mike'];

console.log(key) // 'name'
console.log(value) // 'mike'

// 2)배열 비구조화: 변수 교환
const a = 'apple';
const b = 'banana';

[a, b] = [b, a];

console.log(a) // 'banana'
console.log(b) // 'apple'

// 3)배열 비구조화: 속성값 건너뛰기
const arr = [1, 2, 3, 4, 5];
const [a, , c, ...res] = arr;

console.log(a) // 1
console.log(c) // 3
console.log(rest) // [4, 5]

5) 객체 비구조화(object destructuring): 객체 비구조화는 중괄호를 사용한다. 배열 비구조화에서는 배열의 순서가 중요했지만 객체의 비구조화에서 순서는 무의미하다. 단, 배열의 비구조화에서 왼쪽 변수의 이름은 임으로 결정할 수 있지만, 객체 비구조화에서는 기존 속성명을 그대로 사용해야 한다. 1)존재하지 않는 속성명을 사용하면 undefined가 할당된다. 객체 비구조화에서는 기존 속성명과 다른 이름으로 변수를 생성할 수 있다.

2)속성값이 undefined인 경우에 기본값을 배열 비구조화와 동일하게 기본값을 사용할 수 있지만 속성값이 null인 경우에는 기본값이 들어가지 않는다. 기본값으로 함수의 반환값도 사용할 수 있다. 함수는 기본값이 사용될 때만 호출된다.

3)객체의 비구조화에서도 나머지 속성들을 별도의 객체로 생성할 수 있다. 4)객체 비구조화에서 계산된 속성명을 사용할 때에는 반드시 별칭을 입력해야 한다.

// 1)객체 비구조화: 변수명 변경
const obj = {name: 'mike', age: 21};
const {name: theName, age, hobby} = obj;

console.log(theName); // 'mike'
console.log(hobby); // undefined

// 2)객체 비구조화: 기본값 할당
const obj2 = {age: undefind, grade: null, name: 'mike'};
const { age = 0, grade = 'F', name: 'noName'} = obj2;

console.log(age);  // 0
console.log(grade); // null
console.log(name); // 'mike'

// 3)객체 비구조화: 나머지 속성 정의
const obj3 = {id: 1, name: 'apple', data: '사과는 맛있다.'}
const { id, ...rest} = obj3;

console.log(rest); // {name: 'apple', data: '사과는 맛있다.'}

//4)객체 비구조화: 계산된 속성명
const index = 1;
const {[`key${index}`]:valueOfTheIndex} = {key1:123};
console.log(valueOfTheIndex); // 123

출처: 실전 리액트 프로그래밍-이재승