React - spread & rest

ES6 에서 도입된 spread 와 rest!
서로 다른 문법이지만 비슷한 형태로 이루어져서 헷갈리기 쉬워 정리해봅니다.

1. spread

• '펼치다', '퍼뜨리다' 라는 뜻 그대로 이 문법을 사용하면 객체 혹은 배열을 펼칠 수 있습니다.

const jk = {
	name: '정국'
};

const btsJk = {
	name: '정국',
  	group: 'bts'
};

• 위 코드는 기존의 객체의 속성 등을 건들이지 않고 새로운 객체를 만든 것입니다.
  이때 우리는 아래와 같이 spread 문법을 활용할 수 있습니다.

const jk = {
	name: '정국'
};

const btsJk = {
	...jk,
  	group: 'bts'
}

// 배열도 가능합니다! 
const bts = ['정국', '지민', 'RM', '슈가', '제이홉', '진', '뷔']
const army = [...bts, 'army']

2. rest

• spread 와 생김새는 같지만 전혀 다릅니다!
• rest는 객체, 배열, 함수 파라미터 에서 사용이 가능합니다.

const btsJk = {
	name: '정국',
  	group: 'bts'
};

const {group, ...rest} = btsJk;

console.log(group);
console.log(rest);

• rest 안에 group 값을 제외한 값만 출력됩니다.
• rest 는 객체와 배열에서 사용될 때 비구조화 할당 문법과 함께 쓰입니다.
  무조건 rest 로 사용할 필요는 없습니다.

const ArmyBtsJk = {
	name: '정국',
  	group: 'bts',
  	fan: 'army'
};

const {fan, ...btsjk} = ArmyBtsJk; 
console.log(fan);
console.log(btsJk);

const {group, ...jk} = btsJk;
console.log(group);
console.log(jk);