React - JavaScript 응용하기 (스프레드 연산자)

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서는 이전 포스팅에서 잠시 소개해드렸든 스프레드 연산자를 간단하게 소개하고자 합니다.

간단하게 설명하는 것이니 만큼 예제코드로 이해만 쉽게 하시면 도움이 될 것 같습니다.

 

스프레드연산자는 객체의 중복되는 항목들을 보다 쉽게 사용할 수 있는 연산자입니다.

 

먼저 예시를 살펴보고, 이를 코드로 구현해보겠습니다.

 

const cookie = {
  base: 'cookie',
  madeBy: 'cookieCom',
};

const chocolate = {
  base: 'cookie',
  madeBy: 'cookieCom',
  topping: 'chocolateChip',
};

const whiteCookie = {
  base: 'cookie',
  madeBy: 'cookieCom',
  topping: 'whiteChocolateChip',
};

const whiteChocolate = {
  base: 'cookie',
  madeBy: 'cookieCom',
  topping: 'whiteChocolateChip',
};

위의 4개의 객체를 보면 각각 정의한 항목 중, "base", madeBy 라는 두개의 Key-Value 가 공통적으로 쓰이고 잇습니다.

이를 개별적으로 모두 작성하면 번거롭고 반복작업이 될 수 있습니다.

이를 공통의 요소인 base, madeBy 를 손쉽게 스프레드 연산자를 이용해 작성할 수 있습니다.

 

아래의 예시코드처럼 말입니다.

 

 

const cookie = {
  base: 'cookie',
  madeBy: 'cookieCom',
};

const chocolate = {
  ...cookie,
  topping: 'chocolateChip',
};

const whiteCookie = {
  ...cookie,
  topping: 'whiteChocolateChip',
};

const whiteChocolate = {
  ...cookie,
  topping: 'whiteChocolateChip',
};

이 스프레드연산자는 말 그대로, "..." 으로 시작하는 표기로서 객체나 배열의 요소들을 펼쳐서 제공하는 연산자로 생각해주시면 편합니다.

즉 cookie 라는 객체를 여기서는 스프레드연산자로 풀어버림으로써, cookie 객체 내의 key-value 를 풀어서 다른 객체들에게 요소로 제공되는 것입니다.

이를 출력하면 다른 객체에서도 key-value 형태로 base, madeBy 가 표시되게 됩니다.

 

다음 포스팅에서는 JavaScript 에서 가장 어렵다고 생각되는 동기/비동기 시리즈를 정리해보도록 하겠습니다.

 

감사합니다.