React ES6

구조 분해

구조 분해를 설명하기 위해 샌드위치를 만들어보자.
샌드위치를 만들기 위해 냉장고에서 모든 것을 꺼내나?
아니다, 샌드위치에 사용하고 싶은 품목만 꺼낸다.

구조 분해도 완전히 똑같다.
우리가 작업하고 있는 배열이나 물체가 있을 수 있지만, 이 안에 들어 있는 것들 중 일부만 있으면 된다.

구조 분해를 사용하면 필요한 것만 쉽게 추출할 수 있다.

배열 구조 분해

예제

변수에 배열 항목을 할당하는 기존 방법이다.
이전

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

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

예제

변수에 배열 항목을 할당하는 새로운 방법이다.

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

const [car, truck, suv] = vehicles;

배열을 파괴할 때 변수가 선언되는 순서가 중요하다.

예제

만약 우리가 차와 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);

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기