구조분해할당(Destructuring) {...rest}

비구조화할당이라고도 불린다.

 

출처 : 코딩앙마 유튜브

구조분해 할당 정의

"구조화된 배열을 파괴해 1개 이상의 변수에 할당하는 방법"

 

두가지를 주로 쓰게 될 것이다.

1. 받은 값의 이름 그대로 현재 컴포넌트의 변수로 저장

2. [...rest],{...rest} <= "여기 괄호벗겨주세요"

 

 

예를 들어 유저정보를 api로 받는다고 하자.

근데 값이 뭐가 들어오는지 , 서버에서 딱히 정의가 되지 않았다면?

타입명시를 제대로 못할 때 쓰는 팁이다.

 

 

1. 받은 이름 그대로 변수저장하기

1. 객체
const obj = {name : Alice , age : 30 ,email: 'alice@example.com'}

//이게 구조분해할당
const{name, age , email} = obj

console.log(name) //Alice
console.log(age) //30
console.log(email) //'alice@example.com'




2. 배열
const arr = [1,2,3]

const [first,second,third] = arr;

console.log(first);  // 1
console.log(second); // 2
console.log(third);  // 3

예를 들어 props로 obj값을 받았다면 ,"const name = (obj의)name" 이런식으로 선언을 했어야 했는데

obj 자체를 구조분해로  (obj의) name을 바로 쓸 수 있는 것이다.

 

보통은 변수선언하면

const 변수이름 = 값 이렇게 되는데,

 

구조분해할당은 

const {값: 담은 ,객체 :속성} = {객체}

const [배열이름 , 지정하기] = 배열변수이름

 

이런식으로 사용할 수 있다.

기존 변수선언은

let arr = [1,2,3]

왼쪽 선언 => 오른쪽 값

왼쪽(변수)이 대쉬하는 수컷같은 느낌이었는데

 

구조분해 할당은

const {name ,age} = obj

변수 선언 => 오른쪽 객체or배열

오히려 오른쪽(값)이 왼쪽(변수) 대쉬하는 연상누나같은 느낌이다.

 

 

 

 

2. 구조분해 할당 {...rest}에 대한 내용 시작하겠다.

export interface User {
  name: string;
  age: number;
  email: string;
  address?: string;
  phone?: number;
}

export default function Destructing({ name, age, email, ...rest }: User) {
  return (
    <div>
      <div>{name}</div>
      <div>{age}</div>
      <div>{email}</div>
      <div>{rest.address}</div>
      <div>{rest.phone}</div>
    </div>
  );
}

일단 ...rest는 불확실한 정보를 받아야 할 때 쓴다.

즉, address라는 놈이 있는지,없는지도 모르는 상황에서 에러를 안일으키기 위해서 쓰는 것이다.

 

{rest.phone && <div>{rest.phone}</div>}

좀 더 안전하게 뽑으려면 이런 식으로 뽑는 게 맞다.

 

 

 

사실 내가 궁금한 건 rest를 구조파괴했는데 왜 rest.address , rest.phone 이런식으로 사용해야만 하는 것이냐였다.

구조를 파괴했다며. 그러면 address , phone 이렇게 써야하는 거 아니야?

 

아니었다.

 

구조파괴해도 rest의 요소였다는 것은 문신처럼 각인이 되어있는 것이다.

 

그래서 rest.address , rest.phone 이렇게 뽑아 써야한다.