우선 보다 빠른 이해를 위해 아래의 이미지처럼 제일 윗라인에 객체 하나를 생성하여 console로 찍어 확인해보았다.

아래는 console 결과

그런데 만약 이 user라는 객체에서 userId라는 걸 변수로 가져오고 싶은 경우,

  const userId = user.userId;
  const userEmail = user.email;

당연하게도 이렇게 넣은 뒤

  console.log(userId);
  console.log(userEmail);

console로 찍어보게 되면

결과는 잘 호출되어 나온다.

그런데, 만약 내용이 더 길어졌다고 생각해보자.

const user = {
  userId: "김나나",
  email: "kimLrLr@gmail.com",
  name: "바나나맛우유",
  profileImg: "me.jpg",
};

export const DestEx = () => {
  const userId = user.userId;
  const userEmail = user.email;
  const userName = user.name;
  const userProImg = user.profileImg;

  return (
    <div>
      <h1>유저 정보</h1>
      <ul>
        <li>유저 아이디: {userId}</li>
        <li>유저 이메일: {userEmail}</li>
        <li>유저 이름: {userName}</li>
        <li>유저 프로필 사진: {userProImg}</li>
      </ul>
    </div>
  );
};

이런 식으로 작성하면 결과는 아래처럼 잘 나온다.

하지만 객체가 4개가 아닌, 10개 혹은 20개 이렇게까지 불어나는 경우에도 하나하나 손수 처리하자니 너무 비효율적이지 않을까?
이 비효율적인 행위를 하지 않을 수 있도록 변수 처리를 해주면 어떨까. 여기서 변수 처리를 해주는 것을 비구조화 할당이라고 한다.

객체 비구조화 할당

아래 이미지에서 빨간 박스 안에 담긴 부분을 확인해보자.

그냥 앞 뒤 순서만 바뀌었다고 생각하면 이해가 편해진다.

user = {userId, email, name, profileImg};

이걸 그냥 반대로 적으면 비구조화 할당 문법이다.
(아래는 console에 찍어본 결과)

console에서도 결과가 잘 출력되는 것을 확인했으면 아래로 가서 다시 수정해주자.

그러고 저장한 뒤 확인해보면 원하던 결과대로 그려져있다.

이처럼 비구조화 할당을 이용하면 비효율적인 긴 코드가 아닌 짧고 간결하게 알아보기 편한 코드로 만들어준다.

비구조화 할당이란,
객체 형태가 있을 때 하나하나 변수로 가져오기 보다는 객체 안의 내용을 반대로 열어 사용할 수 있도록 변경해주는 것.