[JavaScript] 비구조화 할당

React 를 공부하다가 '비구조화 할당' 이라는 개념에 대해서 확실히 정리하고 넘어가고 싶어져서 쓰는 포스팅!

 

비구조화 할당이란

비구조화 할당(Destructuring Assignment)은 배열이나 객체의 속성을 해체해서

그 값을 개별 변수에 담을 수 있게 하는 JavaScript 의 표현식이다.

 

쓰는 이유

이는 배열이나 객체의 속성을 쉽게 꺼내서 변수에 할당할 수 있으므로

더 간결하고 가독성이 높은 코드를 작성할 수 있다

 

예시

예를 들어 다음과 같은 객체가 있을 때,

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
};

이 객체의 속성을 꺼내서 개별 변수에 할당하려면 다음과 같이 할 수 있다.

const name = person.name;
const age = person.age;
const gender = person.gender;

하지만 비구조화 할당을 이용하면 다음과 같이 더 간결하게 작성할 수 있다.

const { name, age, gender } = person;

 

응용

예를 들어 다음과 같은 컴포넌트가 있다고 해보자.

function Person(props) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

만약에 비구조화 할당 개념을 사용한다면 이렇게 바꿀 수 있다.

function Person({ name, age }) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

이렇게 작성하면 함수 내에서 props.name 대신 name으로 변수를 사용할 수 있어 

코드가 더 간결해지고 가독성이 높아진다.