destructuring 구조 분해 할당(비구조화 할당)

1. 간단한 array 할당

const arr = [1,2,3];
const [a,b,c] = [...arr]; // a:1, b:2, c:3

 

2. 파라미터에 할당하는데, 빈자리 끼워맞추기식

const object = { a: 1 };
function print({ a, b = 2 }) {
  console.log(a,b);
}
print(object); // a:1 b:2

 

3. react에서 state 사용시

const {value, setValue} = useState(0);

-> useState는  [state, setState]를 반환한다. 따라서 비구조화할당으로 함수형 컴포넌트에서 class컴포넌트에서의 setState를 구현함

 

*실수했던 내용

const obj = {
    name : 'taewan',
    old : 29
}
const nickName = "부디";
const {name : nickName} = obj;

-> 비구조화 할당은 변수선언과 동시에 변수값에 할당하는 형식임.

nickName을 선언하고 그뒤에 똑같이 비구조화할당을 시도해서 nickName은 이미 선언된 변수라는 에러가 뜬다

 

 

4. 깊숙한 곳의 객체값을 꺼내기

const deepObject = {
  state: {
    information: {
      name: 'velopert',
      languages: ['korean', 'english', 'chinese']
    }
  },
  value: 5
};

const { name, languages } = deepObject.state.information;
const { value } = deepObject;

const extracted = {
  name,
  languages,
  value
};

console.log(extracted); // {name: "velopert", languages: Array[3], value: 5}

여기서 extracted부분은 아래와 같은내용임.

const extracted = {
  name: name,
  languages: languages,
  value: value
}

또한 위에서처럼 비구조화할당을 여러번 하지않고 한번만으로 다 꺼내는방법도 있는데, 비구조화할당을 엄청 많이 해야하는구조일때 쓰면 좋을듯 (그런 경우가 있을까..?)

const deepObject = {
  state: {
    information: {
      name: 'velopert',
      languages: ['korean', 'english', 'chinese']
    }
  },
  value: 5
};

const {
  state: {
    information: { name, languages }
  },
  value
} = deepObject;

const extracted = {
  name,
  languages,
  value
};

console.log(extracted);