컴포넌트에서 Props를 조회하는 코드를 더 짧게 구현하는 방법이 있습니다. 구조 분해 할당이라는 자바스크립트 문법을 사용하는 방법으로, ‘비구조화 할당’이라고 부르기도 합니다. 이 문법은 객체 안에 있는 값을 더욱 짧은 코드를 사용해 밖으로 추출할 수 있게 해줍니다.

예를 들어, 다음과 같은 코드가 있다고 가정해봅시다.

const object = {
  a: 1,
  b: 2,
  c: 3
};

const a = object.a;
const b = object.b;
const c = object.c;

매번 object를 참조해 a, b, c 값을 따로 선언해줬는데요. 구조 분해 할당을 사용하면 다음과 같이 표현할 수 있습니다.

const object = {
  a: 1,
  b: 2,
  c: 3
};

const {a, b, c} = object;

첫 번째 코드와 두 번째 코드는 기능이 완전히 동일합니다.