[JS] 비구조화 할당 (destructuring assignment) 문법

 

* 비구조화 할당 (destructuring assignment)

=> 배열이나 객체의 속성을 분해하여 개별 변수에 할당.

 

---

 

[ 배열 비구조화 할당 ]

num이라는 변수에 아래와같이 배열을 할당  => 변수 a와 c에 배열 요소들을 각각 할당. 

 

(방법1)

  let num = [1, 2];
  
  let a = num[0];
  let c = num[1];

 

(방법2)

  let num = [1, 2];

  let [a, c] = [1, 2]; 
  // or
  let [a, c] = num

 

---

 

* 배열의 일부 요소만 할당

  let num = [1, 2, 3, 4, 5];

  let [a, b, c, , e] = num

 

* 기본값 설정

const num = [1, 2];

const [a, b, c = 3] = num;

 

---

 

* 리액트의 useState도 배열의 비구조화 할당을 이용한 방식 *

 

'useState()' 은 '[상태값, 상태값 업데이트 함수]' 를 반환.

  let [value, setValue] = useState("초기값");

위의 예시에서 'value' 에는 "초기값" 이, 'setValue' 함수에는 상태를 업데이트 하는 함수가 할당된다.

따라서 setValue 로 상태를 업데이트 하는 함수를 호출해서 상태값을 변경할 수 있다.

setValue("새로운값")

 

비구조화 할당 이해를 위해 간단하게 표현하자면 아래와 같은 방식.

const useState = ("새로운값") => {
  
  // state저장 및 변경로직(setState함수)
  
  return [state, setState];
};

---

* 실제 동작 코드는 다름

https://seokzin.tistory.com/entry/React-useState%EC%9D%98-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC%EC%99%80-%ED%81%B4%EB%A1%9C%EC%A0%80

[React] useState의 동작 원리와 클로저

 

 

 

---

 

[ 객체 비구조화 할당 ]

객체의 속성을 개별 변수에 할당.

 

const person = {
  id: 'phyho',
  name: 'pyo'
};

const { id, name } = person;

console.log(id); // phyho
console.log(name); // pyo

 

---

* 객체의 속성들을 다른 변수명에 할당

const person = {
  id: 'phyho',
  name: 'pyo'
};

const { id: userId, name: userName } = person;

console.log(userId); // phyho
console.log(userName); // pyo

* 기본값 설정

const person = {
  id: 'phyho',
};

const { id: userId, name: 'pyo' } = person;

console.log(id); // phyho
console.log(name); // pyo

 

---

 

[ 중첩된 객체와 배열 ]

const person = {
  name: 'pyo',
  id: {
    naver: '네이버아이디',
    google: '구글아이디'
  }
};

const {
  name,
  id: { naver, google }
} = person;

console.log(name); // pyo
console.log(naver); // 네이버아이디
console.log(google); // 구글아이디

 

---

 

[ 함수 매개변수에서의 비구조화 ]

function printInfo({ name, id }) {
	console.log(`NAME: ${name}, ID: ${id}`);
}

const person = {
	name: 'pyo',
    id: '아이디'
};

printInfo(person);	// NAME: pyo, ID: 아이디