[REACT] 구조분해 할당

구조분해 할당??

▶️J S에서 객체 혹은 배열에서 필요한 요소를 각각 변수에 담아 사용하는 것

---

객체에서의 구조분해할당

▪️ 아래의 코드에서 1번과 2번의 결과가 모두 같지만 2번의 코드가 훨씬 짧고 효율적!!

const obj ={
스벅:'커피',
맥날:'햄버거',
서브웨이:'샌드위치',
피자헛:'피자'}

// 1번:
const 스벅: obj.스벅;
const 맥날: obj.맥날;
const 서브웨이: obj.서브웨이;
const 피자헛: obj.피자헛;

// 2번:
const {스벅,맥날,서브웨이,피자헛} = obj  

▪️ 아래와 같이 필요한 key값만 꺼내서 사용할 수도 있다.

const {스벅,피자헛} = obj  

---

배열에서의 구조분해할당

▪️ 역시 1번과 2번의 결과가 모두 같지만 2번의 코드가 훨씬 짧고 효율적!!

const arr =['커피', '햄버거','샌드위치','피자']

// 1번:
const 스벅: arr[0];
const 맥날:  arr[1];
const 서브웨이:  arr[2];
const 피자헛:  arr[3];

// 2번:
const [스벅,맥날,서브웨이,피자헛] = arr

▪️ 배열도 역시 필요한 요소만 꺼내서 사용할 수 있는데 객체와 조금 다르다.

인덱스 값을 가지고 있기때문에, 순서대로 써주어야한다.
만약 커피 와 샌드위치값만 변수에 할당하고 싶다면 중간을 비워주거나 '_'를 사용.

const[스벅,_,서브웨이] = arr;
console.log(스벅)            // '커피'
console.log(서브웨이)         // '샌드위치'

▪️ 해당하는 값이 없는경우

해당하는 값이 없는경우, undefined가 출력되기 때문에 기본값을 넣어주는 것이 좋다.

const [a,b,c] = [1,2]
// a=1, b=2, c=undefined.
const [a=3,b=4,c=5] = [1,2]
// a=1, b=2, c=5