비구조화 할당 문법을 사용해보자 !!!!!

비구조화 할당 문법을 사용하면 다음과 같이 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언해 줄 수 있다.

---

객체인 경우 (일반적인 할당)

• 아... 이거 너무 귀찮잖아?

const child = {
  name: "짱구",
  age: 5,
  school: "떡잎유치원"
};

const name = child.name;
const age = child.age;
const school = child.school;

console.log(name); // "떡잎"
console.log(age); // 5
console.log(school); // “떡잎유치원”

객체인 경우 (비구조화 할당)

• 객체는 비구조화 할당할 때는 이름이 중요!!! (반면에 배열은 순서가 중요)
• 하나만 할당해도 되고 할당 순서가 달라도 가능

const child = {
  name: "짱구",
  age: 5,
  school: "떡잎유치원"
};

const { name, age, school } = child;
const { school, name, age } = child;
const { school } = child;
// 순서 상관 없이 이름이 중요하기에 세 가지 방법 전부 가능

console.log(name); // "짱구"
console.log(age); // 5
console.log(school); // “떡잎유치원”

객체를 반환하는 함수의 경우 (비구조화 할당)

const getChild(){
  return {
    name: "짱구",
    age: 5,
    school: "떡잎유치원"
  }
};

const { name, age, school } = getChild();
const { school, name, age } = getChild();
const { school } = getChild();
// 순서 상관 없이 이름이 중요하기에 세 가지 방법 전부 가능

console.log(name); // "짱구"
console.log(age); // 5
console.log(school); // “떡잎유치원”

객체를 반환하는 함수의 경우 (비구조화 할당)

const child = {
  name: "짱구",
  age: 5,
  school: "떡잎유치원"
};

function print({ name, age, school }) {
  return `${name}(${age})는 ${school}에 다니고 있다.`
}

print(child); // "짱구(5)는 떡잎유치원에 다니고 있다."

비구조화 할당시 이름 변경 (비구조화 할당)

const animal = {
  name: '흰둥이',
  type: '강아지'
};

const nickname = animal.name; 
const { name: nickname } = animal;
// ":" 문자를 사용해서 이름 변경

console.log(nickname); // 흰둥이

객체인 경우 (비구조화 할당)

const { name, age, school } = {
  name: "짱구",
  age: 5,
  school: "떡잎유치원"
};

console.log(name); // "짱구"
console.log(age); // 5
console.log(school); // “떡잎유치원”

깊은 객체인 경우 1 (비구조화 할당)

const deepObject = {
  state: {
    information: {
      name: "짱구",
      features: ["떡잎유치원", "흰둥이", "액션가면"]
    }
  },
  age: 5
};

const { name, feature } = deepObject.state.information;
const { age } = deepObject;

const extracted = {
  name,
  languages,
  value
};

console.log(extracted); // {name: "짱구", features: Array[3], age: 5}

깊은 객체인 경우 2 (비구조화 할당 / 한번에 할당)

const deepObject = {
  state: {
    information: {
      name: "짱구",
      features: ["떡잎유치원", "흰둥이", "액션가면"]
    }
  },
  age: 5
};

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

const extracted = {
  name,
  languages,
  value
};

console.log(extracted); // {name: "짱구", features: Array[3], age: 5}

배열인 경우 (일반적인 할당)

const numbers = [5, 10, 15];

const number1 = numbers[0];
const number2 = numbers[1];
const number3 = numbers[2];

console.log(number1); // 5
console.log(number2); // 10
console.log(number3); // 15

배열인 경우 (비구조화 할당)

const [number1, number2, number3] = [5, 10, 15];

console.log(number1); // 5
console.log(number2); // 10
console.log(number3); // 15

useQuery() 구현 코드로 미루어 보아 형태는 객체일 것

  const { data } = useQuery(FETCH_BOARD, {
    variables: { boardId: router.query.boardId },
  });

useState(), useMutation() 구현 코드로 미루어 보아 형태는 배열일 것

const [state, setState] = useState("");
const [createBoard] = useMutation(CREATE_BOARD);