[React.js] React 사용을 위한 자바스크립트 응용 - Spread 연산자

 

React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다.

 

 

spread 연산자

객체를 다루는 또 다른 방법이다.

맛있는 쿠키를 만들어보자.

const cookie = {
  base : "cookie",
  madeIn : "korea"
};

const chocohipCookie = {
  base : "cookie",
  madeIn : "korea",
  toping : "chocochip"
};

const blueberryCookie = {
  base : "cookie",
  madeIn : "korea",
  toping : "blueberry"
};

const strawberryCookie = {
  base : "cookie",
  madeIn : "korea",
  toping : "strawberry"
};

기본적인 쿠키 하나와 토핑에 따라 3가지의 쿠키를 더 만들었다. 그런데 만들다 보니 중복되는 프로퍼티 부분들이 눈에 띈다. 개발자는 참을 수가 없다. 이럴 경우 spread 연산자를 사용하면 중복 없이 쉽게 구현할 수 있다.

 

const cookie = {
  base : "cookie",
  madeIn : "korea"
};

const chocohipCookie = {
  ...cookie,
  toping : "chocochip"
};

const blueberryCookie = {
  ...cookie,
  toping : "blueberry"
};

const strawberryCookie = {
  ...cookie,
  toping : "strawberry"
};

console.log(chocohipCookie);
/*
{base: "cookie", madeIn: "korea", toping: "chocochip"}
	base: "cookie"
	madeIn: "korea"
	toping: "chocochip"
*/

... 이 점 세개의 기호가 spread 연산자를 나타낸다. 기존 객체의 프로퍼티를 다른 객체에 포함시킨다. 

반응형

spread 연산자는 객체 말고 배열에서도 사용할 수 있다.

const noTopingCookies = ['촉촉한 쿠키', '안촉촉한 쿠키'];
const topingCookies = ['바나나 쿠키', '블루베리 쿠키', '딸기 쿠기', '초코칩 쿠키'];

const allCookies = [...noTopingCookies, ...topingCookies];
console.log(allCookies);
/*
["촉촉한 쿠키", "안촉촉한 쿠키", "바나나 쿠키", "블루베리 쿠키", "딸기 쿠기", "초코칩 쿠키"]
0: "촉촉한 쿠키"
1: "안촉촉한 쿠키"
2: "바나나 쿠키"
3: "블루베리 쿠키"
4: "딸기 쿠기"
5: "초코칩 쿠키"
*/

배열의 경우는 전에 배웠던 concat 내장 함수를 사용해도 괜찮지만 concat 함수보다는 spread 연산자가 좀 더 유연하다.

 

const noTopingCookies = ['촉촉한 쿠키', '안촉촉한 쿠키'];
const topingCookies = ['바나나 쿠키', '블루베리 쿠키', '딸기 쿠기', '초코칩 쿠키'];

const allCookies = [...noTopingCookies,"썩은맛 쿠키", ...topingCookies];
console.log(allCookies);
/*
["촉촉한 쿠키", "안촉촉한 쿠키", "썩은맛 쿠키", "바나나 쿠키", "블루베리 쿠키", "딸기 쿠기", "초코칩 쿠키"]
0: "촉촉한 쿠키"
1: "안촉촉한 쿠키"
2: "썩은맛 쿠키"
3: "바나나 쿠키"
4: "블루베리 쿠키"
5: "딸기 쿠기"
6: "초코칩 쿠키"
*/

이렇게 배열 중간에 새로운 요소를 추가할 수도 있다.