Javascript ES6 비구조화 할당 이란?

비구조화 할당(destructuring assignment)

 

구조 분해 문법이라고도 불리며, 함수의 파라미터 부분에서도 사용 가능.

 

const [apple, banana, grape] = ["Apple", "Banana", "Grape"];
console.log(apple); // Apple
console.log(banana); // Banana
console.log(grape); // Grape

이런식으로 선언과 동시에 바로 할당까지 해버리는걸 비구조 할당이라고 한다.

 

원래 자바 스크립트의 배열은 변수에 담아서 쓰고 싶을때 하나씩 할당을 해주는 노가다성 작업이 필요했는데

 

이걸 단축시키는 패턴으로 작성하는것이 비구조화 할당이다. 또는 구조분해 할당.

 

리액트에서는

import React from 'react';

const MyComponent = ({ name, children }) => {
  return (
    <div>
      안녕하세요, 제 이름은 {name}입니다. <br />
      chidren 값은 {children}입니다.
    </div>
  );
};

MyComponent.defaultProps = {
  name: '기본 이름'
};

export default MyComponent;

 

이런식으로 파라미터를 대입 하듯이 쓸 수가 있다.

 

참고로 화살표함수는 함수를 파라미터로 전달할때 유용하며, this가 가르키는 대상이 바로 위에 있는 종속객체가 아니라, 자신을 부른 종속 인스턴스를 가르킨다.

 

즉, { }로 싸여 있다고 그것을 this로 인식하는게 아니라, 그 내용이 포함된 함수 영역을 this로 인식한다.

 

즉, 좀더 보통의 사용 의도에 맞게 this를 가진다는 점에서 편리한 점이 있다.

 

 

비구조화 할당과 화살표함수, 눈에 잘 익지 않을수도 있지만 알고보면 더 편리하게 사용하라고 만든 약속들에 불과하다.