Sangil's blog

React Native에서 화면을 전환할때 파라미터를 전달하는 방법을 공부하던 중 아래와 같은 const { itemId } = route.parms란 문법을 보게 되었다.

오잉.. 저게 뭐지? 변수를 {} 대괄호로 감싸서 받네... (참 공부할게 많구나..)

검색해보니 ( https://javascript.info/destructuring-assignment ) Destructuring assignment라는 용어가 나오는데 한국어로 하면 구조분해 할당이라고 한다... 아놔 구조분해 할당이 도대체 뭔말인가싶다.. 이해가 퐉 될만한 한국어는 없나..

내식대로 해석을 하면.. 자바스크립트에서는 객체, 데이터를 생성할 때Array나 Object 형태로 생성을 하는데, 해당 데이터를 가져올 때, const a = array[0] 이나 const a = object.a 라는 형태로 데이터를 가져온다. 

헌데 ES6의 자바스크립트 문법에서는, 구조를 분해해서 할당한다. 라는 개념으로 => object의 구조를 분해해서 변수로 할당한다!  => object 에서 a라는 변수를 분해해 const a에 할당한다! 라는 것을 Destructuring assignment라는 용어로 정리하고, 아래와 같이 쓰자고 정의했나 보다. 
-object 구조

let object ={
    a : "aaaa"
};
// const a = object.a; 기존 javascript 문법
const {a} = object;

-array 구조

let arr = ["a", "b"];
//let first = arr[0]; let second=arr[1]; 기존 javascript
let [first, second] = arr;

결과적으로 우리 기존에 썻던 문법에서 어레이나 오브젝트에서 값가져오는게 귀찮으니까 좀 줄여서 저렇게 쓰자! 라고 정의했나보다. 익숙하지 않아서 그렇지 사용하다보면 편할거 같긴 하다 :). 더 자세한 사용방법은 위에 참고한 링크에 정말 자세하게 소개되어있다 참고하도록 하자!