[React] Destructuring

Destructuring
: 객체나 배열의 속성을 보다 쉽게 추출할 수 있게 해줌

---

객체 Destucturing

다중 속성 추출

const { name, price } = item;
console.log(name);  // 커피
console.log(price); // 4000

💡 함수 매개변수에서의 사용 💡

• obj 안의 key를 그대로 사용하여 분해

function intro({ name, age }) {
  console.log(`안녕하세요, 제 이름은 ${name}이고 나이는 ${age}살입니다.`);
}
intro({ name: "홍길동", age: 21 });

---

배열 Destructuring

기본 사용

• 배열의 요소를 위치에 따라 변수로 할당

let colors = ["red", "green", "blue"];
let [firstColor, secondColor] = colors;
console.log(firstColor);  // red
console.log(secondColor); // green

---

예시

문제 1

const person = {
  name: "홍길동",
  age: 21,
  job: "개발자"
};

객체에서의 destructuring 사용

const { name, age, job } = person;
console.log(name);  // 홍길동
console.log(age);   // 21
console.log(job); // 개발자

---

문제2

const movie = {
  title: "Inception",
  director: "Christopher Nolan",
  release: {
    year: 2010,
    month: "July"
  }
};

객체에서의 destructuring 사용

const { title, release: { year } } = movie;
console.log(title); // Inception
console.log(year);  // 2010

---

문제3

function confirmReservation(user) {
  return `${name} 고객님의 ${roomType}룸 입실날짜는 ${firstDate} 입니다.`
}

const userInfo = {
  name: "James",
  roomType: "Deluxe",
  date: "2023-05-30"
}
const result = confirmReservation(userInfo);
console.log(result);

정답

function confirmReservation(user) {
  const {name, roomType, date: firstDate} = user;
  return `${name} 고객님의 ${roomType}룸 입실날짜는 ${firstDate} 입니다.`
}

const userInfo = {
  name: "James",
  roomType: "Deluxe",
  date: "2023-05-30"
}
const result = confirmReservation(userInfo);
console.log(result); 
// 출력 결과: 'James 고객님의 Deluxe룸 입실날짜는 2023-05-30 입니다.'