& React에서 비구조화 할당 사용하기 >

비구조화 할당

destructuring assignment :: ECMAScript 2015에 들어온 새로운 문법

배열이나 객체의 요소를 해체하여 별개의 변수로 추출할 수 있도록 하는 것

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

위의 코드의 첫 줄에서 변수 a, b, rest를 선언했습니다. (선언만 하고 아직 할당하지 않은 상태) 그리고 두 번째 줄에서 이름 없는 배열 두 개가 같다고 표현했습니다. 왼쪽 항에 있는 배열은 a, b의 원소를 가지고 있는 배열이고, 오른쪽 항의 배열은 10과 20을 원소로 가지고 있는 배열입니다. 따라서 a는 10이 되고, b는 20 이 됩니다.

이처럼 변수에 직접 할당하는 것이 아닌 배열의 원소로서 값을 할당하는 것을 비구조화 할당이라고 합니다.

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20

비구조화 할당은 위의 코드와 같이 배열 뿐아니라 객체에서도 가능한 표현법입니다. *(두 객체를 비교할 때는 비교식 전체를 괄호로 감싸야 합니다) 두 객체가 같을 때, 왼쪽 항의 a는 할당되지 않았지만 오른쪽 항 객체의 속성값을 할당받습니다.

// Stage 3 proposal
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); //{c: 30, d: 40}

배열에서와 마찬가지로 전개연산자를 활용한 객체에서의 비구조화 할당 역시 나머지 배열을 할당합니다. (오른쪽 항의 첫 번째, 두 번째 속성은 각각 변수 a, b에 할당되고, 나머지 c, d 속성은 rest변수에 객체로서 할당된다)

배열array

const animalList = ["CAT", "DOG", "TIGER"];
const cat = animalList[0];
const dog = animalList[1];
const tiger = animalList[2];
console.log(cat); // CAT
console.log(dog); // DOG
console.log(tiger); // TIGER

animalList라는 변수는 순서대로 'cat', 'dog', 'tiger'를 가지고 있는 배열입니다.

이 변수가 가진 값을 각각 변수에 꺼내어 쓰려고 하면 이렇게 직접 하나하나 지정을 해주어야 합니다.

이렇게 작성하는 것은 아무래도 귀찮은 작업이고, 코드를 읽기에도 괜히 복잡하게 보이는 단점이 있습니다.

const [cat, dog, tiger] = ["CAT", "DOG", "TIGER"];
console.log(cat); // CAT
console.log(dog); // DOG
console.log(tiger); // TIGER

비구조화 할당을 이용하면 위처럼 간단하게 작성할 수 있습니다.

나머지 패턴

const animalList = ["CAT", "DOG", "TIGER"];
const [cat, ...

더 나아가, 앞의 3개 요소와 나머지 요소를 분리하고 싶을 때에는 위 예시코드처럼 작성할 수 있습니다

기본값

const [cat, dog, tiger, animal = "MONKEY"] = ["CAT", "DOG", "TIGER"];
console.log(cat); // CAT
console.log(dog); // DOG
console.log(tiger); // TIGER
console.log(animal); // MONKEY

비구조화 할당을 할 때에는 기본값을 지정할 수 있습니다.

오브젝트object

const animals = {
  cat: "CAT",
  dog: "DOG",
  tiger: "TIGER"
};
const cat = animals.cat;
const dog = animals.dog;
const tiger = animals.tiger;
console.log(cat); // CAT
console.log(dog); // DOG
console.log(tiger); // TIGER

위와 같이 오브젝트에서 요소를 꺼내어 변수에 할당할 때에도 가능합니다.

const { cat, dog, tiger } = {
  cat: "CAT",
  dog: "DOG",
  tiger: "TIGER"
};
console.log(cat); // CAT
console.log(dog); // DOG
console.log(tiger); // TIGER

위와 같이 작성하면 비구조화 할당을 수행하며, 변수의 이름과 같은 key에 있는 값이 담깁니다.

나머지 패턴

const { cat, ...animals } = {
  cat: "CAT",
  dog: "DOG",
  tiger: "TIGER"
};
console.log(cat); // CAT
console.log(animals); // { dog: DOG, tiger: TIGER }

배열에서의 비구조화 할당에 나머지 패턴이 있듯이, 오브젝트에서의 비구조화 할당에도 나머지 패턴이 있습니다.

기본값

const { cat, dog, tiger, monkey = "monkey" } = {
  cat: "CAT",
  dog: "DOG",
  tiger: "TIGER"
};
console.log(cat); // CAT
console.log(dog); // DOG
console.log(tiger); // TIGER
console.log(monkey); // MONKEY

배열에서의 비구조화 할당처럼 오브젝트에서도 기본값을 지원합니다.

✔ 참고

https://velog.io/@public_danuel/destructuring-assignment

https://pro-self-studier.tistory.com/31