[React] React ES6 Destructuring

구조화

배열이나 개체에 포함된 항목 중 일부만 필요할 때
Destructuring은 필요한 것만 추출하기 쉽게 한다.

배열 파괴하기

Before

const vehicles = ['mustang', 'f-150', 'expedition'];

// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];

After

const vehicles = ['mustang', 'f-150', 'expedition'];

const [car, truck, suv] = vehicles;

배열을 구조화할 때 변수가 선언되는 순서가 중요하다.

car와 suv만 원하는 경우 트럭은 생략하고 쉼표는 유지하면 된다.

const vehicles = ['mustang', 'f-150', 'expedition'];

const [car,, suv] = vehicles;

구조화는 함수가 배열을 반환할 때 유용하다.

function calculate(a, b) {
  const add = a + b;
  const subtract = a - b;
  const multiply = a * b;
  const divide = a / b;

  return [add, subtract, multiply, divide];
}

const [add, subtract, multiply, divide] = calculate(4, 7);

/*
Sum: 11
Difference -3
Product: 28
Quotient 0.5714285714285714
*/

---

객체 분해

Before

const vehicleOne = {
  brand: 'Ford',
  model: 'Mustang',
  type: 'car',
  year: 2021, 
  color: 'red'
}

myVehicle(vehicleOne);

// old way
function myVehicle(vehicle) {
  const message = 'My ' + vehicle.type + ' is a ' + vehicle.color + ' ' + vehicle.brand + ' ' + vehicle.model + '.';
}

After

const vehicleOne = {
  brand: 'Ford',
  model: 'Mustang',
  type: 'car',
  year: 2021, 
  color: 'red'
}

myVehicle(vehicleOne);

function myVehicle({type, color, brand, model}) {
  const message = 'My ' + type + ' is a ' + color + ' ' + brand + ' ' + model + '.';
}

// My car is a red Ford Mustang.

개체 속성을 특정 순서로 선언할 필요는 없다.

중첩된 객체를 참조한 다음 콜론과 중괄호를 사용하여 중첩된 객체에서 필요한 항목을 다시 구조화하여 깊이 중첩된 객체를 구조 해제할 수도 있다.

const vehicleOne = {
  brand: 'Ford',
  model: 'Mustang',
  type: 'car',
  year: 2021, 
  color: 'red',
  registration: {
    city: 'Houston',
    state: 'Texas',
    country: 'USA'
  }
}

myVehicle(vehicleOne)

function myVehicle({ model, registration: { state } }) {
  const message = 'My ' + model + ' is registered in ' + state + '.';
}

// My Mustang is registered in Texas.

참고자료

React ES6 Destructuring
Destructuring state/props in React