스프레드 연산자 "...변수명" (배열, 문자열, 객체)

 스프레드 연산자 "...변수명(반복 가능한 객체)"

전개 연산자, 스프레드 연산자

---

 리액트를 공부하다가 "..." 이란 기호가 보여 몹시 당황했다. 전문 프런트 개발자가 아니기도 하고, 프로젝트마다 이것저것 프로그래밍 언어를 바꿔가며 일을 하다 보니 그럴 수 있다는 생각에 틈이나 정리해 본다.

 

 반복이 가능한 객체에서 값을 개별 요소로 분리하는 스프레드-연산자.

 

 스프레드 연산자는 "..." 기호로 표기한다. 전개 연산자.

 스프레드 연산자를 사용하면 배열, 문자열, 객체 등과 같이 반복이 가능한 객체의 값을 개별 요소로 편리하게 분리할 수 있다.

 

 스프레드 연산자와 배열, 객체 사용방법 예제

 

 배열의 경우 예)

let arrA = [1, 2, 3];
let arrb = [...arrA, 4, 5, 6];

console.log(arrb);

 

결과

스프레드 연산자 배열의 사용법

 

객체의 사용 예)

let objA = {
  a: 1,
  b: 2,
};

let objB = {
  ...objA,
  c: 3,
  d: 4,
};

 

결과

 

객체의 사용 예

---

 리액트를 사용할 때 자주 마주할 수 있는 실전형은 스프레드 연산자와 함수다.

 배열을 통해 기본적인 사용의 예를 알아봤고 리액트를 사용하게 되면 아래와 같은 예제를 눈여겨보고 기억해 놓아 사용법을 숙지해야 한다.

 

function func(a, b, c) {
  console.log("func 함수 실행");
  console.log(a);
  console.log(b);
  console.log(c);
  console.log("func 함수 종료");
}

let arr = [1, 2, 3];
func(...arr);

 

결과

func 함수안에 스프레드 변수를 넘긴 결과.

 

스프레드 연산자를 이용해 인수를 전달하면 인수가 1개가 아닌 여러 개로 나뉘어 전달할 수 있게 된다.