[React #9] 비 구조화 할당 / 스프레드 연산자

01. 배열의 비 구조화 할당

• 대괄호 [] 를 이용해서 배열의 값을 순서대로 할당받아서 사용할 수 있는 방법
• 순서대로 배열의 요소를 변수에 쉽게 할당할 수 있음

 

 1) 원래의 코드

let arr = ["one", "two", "three"];

let one = arr[0];
let two = arr[1];
let three = arr[2];

console.log(one, two, three);

 

2) 비 구조화 할당

// 방법 1
let arr = ["one", "two", "three"];
let [one, two, three] = arr;

// 방법 2
[one, two, three] = ["one", "two", "three"];
console.log(one, two, three); // one two three

• 배열을 선언 자체에서 분리를 해서 선언 분리 비 구조화 할당이라고 함
• 배열 안에 변수 3개를 선언하고 배열을 할당해줌
• 변수 one에 "one"이라는 값을 넣어줌

 

3) 비 구조화 할당 기본값 설정

let [one, two, three, four = "four"] = ["one", "two", ,"three"];
console.log(one, two, three, four);

• 기본값을 설정 안할경우 undefined가 나옴

 

4) 비 구조화 할당 swap

let a = 10;
let b = 20;

console.log(a, b); // 10 20
[a, b] = [b, a];
console.log(a, b); // 20 10

 

 

 

02. 객체의 비 구조화 할당

• key 값을 기준으로 비 구조화 할당이 이루어짐

 

 1) 원래의 코드

let object = { one: "one", two: "two", three: "three" };

let one = object.one;
let two = object.two;
let three = object.three;

console.log(one, two, three);

 

2) 비 구조화 할당

let object = { one: "one", two: "two", three: "three" };

let { one, three, two } = object;
console.log(one, two, three); // one two three

• object의 key 값을 기준으로 'one'이라는 key의 value를 저장함
• 배열처럼 인덱스가 아닌 key 값을 기준으로 저장하기 때문에 순서가 상관없음

 

3) 비 구조화 할당 기본값 설정

let object = { one: "one", two: "two", three: "three" };

let { one, two, three, four = "four" } = object;
console.log(one, two, three, four); // one two three four

 

4) 비 구조화 할당 변수명 변경

• 객체의 프로퍼티의 key 값을 기준으로 저장하기 때문에 변수명이 key 값에 제한되어 있음
• 다른 변수의 이름을 사용하고 싶을 때는 뒤에 원하는 변수명을 넣으면 바꿔서 할당받을 수 있음

let object = { one: "one" };

let { one: otherOne } = object;
console.log(otherOne); // one

 

 

 

03. Spread 연산자

• '...' : 객체의 값을 새로운 객체에 펼쳐주는 역할
• 중복된 프로퍼티를 계속 작성해야 되는 경우, 객체의 중복되는 요소를 줄여줄 수 있음

- 원래의 코드

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

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

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

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

 

- 스프레드 연산자 사용

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

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

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

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

console.log(cookie); // {base: 'cookie', madeIne: 'korea'}
console.log(chocochipCookie); // {base: 'cookie', madeIne: 'korea', toping: 'chocochip'}
console.log(blueberryCookie); // {base: 'cookie', madeIne: 'korea', toping: 'blueberry'}
console.log(strawberryCookie); // {base: 'cookie', madeIne: 'korea', toping: 'strawberry'}

 

- 객체의 프로퍼티를 펼치는 것처럼 배열의 원소를 순서대로 펼칠 수 있음

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

const allCookies = [...noTopingCookies, "악마의 쿠키", ...toppingCookies];
// const allCookies = noTopingCookies.concat(toppingCookies);
console.log(allCookies); // ['촉촉쿠키', '안촉촉쿠키', '악마의 쿠키', '바나나쿠키', '블루베리쿠키', '딸기쿠키', '초코칩쿠키']

• concat과 달리 중간에 값을 유연하게 넣을 수 있음

 

 

참고자료

이정환 Winterlood, '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지'