비구조화 할당에 대하여

비구조화 할당이라는 말은 말 그대로 非구조화, 구조를 깬다.는 의미죠. 간단히 구조화 되어있는 것을 쪼개서 쉽게 구조(배열이나 객체) 안에 있는 값을 가져오려고 한 노력의 결과로 보입니다.

 

POJO(plain old javascript object) 에서 이런 객체가 있다고 해봅시다.

const myObject = {
  a : "foo",
  b: false,
  c: 11
}

 

이 객체 안에 있는 a,b,c 의 값을 콘솔로그로 찍어보려고 한다면 '원래는' 이렇게 해야할 겁니다.

console.log(myObject.a); // foo
console.log(myObject[b]); // false
console.log(myObject.c); // 11

 

그런데 참 어이없게도 es6 이후의 비구조화 할당을 사용하면 다음처럼 이용합니다.

const { a, b, c } = myObject;
console.log(a); // "foo"
console.log(b); // false
console.log(c); // 11

뭐야 이거

 

비구조화 할당은 함수에서도 사용할 수 있습니다.

function renderUser({name, age, addr}){
  console.log(name);
  console.log(age);
  console.log(addr);
}

const users = [
  {name: 'kim', age: 10, addr:'kor'},
  {name: 'joe', age: 20, addr:'usa'},
  {name: 'miko', age: 30, addr:'jp'}
];

users.map((user) => {
  renderUser(user);
});

user이라는 객체배열 선언 후 map으로 renderUser함수를 호출할 때 인자로 객체의 key인 name, age, addr를 선언하면 해당 key의 value 값이 log에 뜨게 됩니다.

 

리액트에서는 어떻게 쓰일까요?

벨로퍼트님의 https://react.vlpt.us/basic/05-props.html 포스팅을 예로 들어보겠습니다.

 

App에서 Hello 컴포넌트에게 name="react" color="red" 의 데이터(props)를 전달해주고 있습니다.

 

이것도 원래대로라면 아래 예제처럼

 

{ props.color } { props.name } 으로 써줘야 props 객체 안의 값을 읽어올 수 있겠죠.

그런데 생각해보면 props 객체는 다음과 같은 구조를 띄고 있을 겁니다.

 

const props {
  color: 'red',
  name: 'react'
};

 

위에서 말씀드린 비구조화 할당을 이용한다면

const { color, name } = props; 로 바꿀 수 있고 사용할 때는 { color } { name } 을 써주는것만으로 충분할 것입니다.

 

Hello 컴포넌트의 파라미터였던 props를 { color, name } 으로 대체했는데 이는 { color, name } = props 와 동일한 구문입니다.

 

이제 props.color 혹은 props.name 처럼 번잡하게 사용하지 않아도 됩니다!