리액트 비구조화 할당

const { data } = user;

'user의 data 데이터를 추출해서 data라고 명명해서 사용한다.'
라는 뜻이다.
풀어서 쓰면
const data = user.data;이지만 저렇게 쓰면 눈에 보이기 편해진다.

이런 식의 표현을 자바스크립트에서 언제부터인가 항상 사용해왔다.
나는 대충 굴러가는 방식만 알고 열심히 쓰긴 쓰는데
어떤 좋은 점이 있는지, 왜 쓰는지 모르고 쓰는 것들이 있다.
이런 식의 표현도 그 중 하나였다.
최근에는 공부를 하면서 저런 단순한 구조가 아닌 좀 더 복잡한 구조로

const {data: {name, age}} = user;

이렇게 보이는 식도 보였다.
그래서 한번 짚고 넘어가고 싶었다.

이런 구조를 비구조화 할당이라고 한다.
비 구조화 할당을 사용하는 이유로는
코드의 간결성
코드의 가독성
코드의 유연성
코드 성능이 향상 의 장점이 있는데

const {data: {name, age}} = user;

위의 식을 풀면
user 객체 안에 있는 data 객체의 name과 age 속성을 추출해 새로운 name과 age 변수에 할당하는 것이다.
여기서 data는 객체 속성 이름인데, 그 안에서 또 name과 age로 분해해주는 것이다.
이렇게 작성하면

const name = user.data.name;
const age = user.data.age;

혹은

const { data } = user;
const name = data.name;
const age = data.age;

이렇게 한번 더 적어 명명하는 것을 피할 수 있어 코드가 좀 더 간결해진다.