객체구조분해할당 [새로운 변수이름 할당하기]

구조분해할당이란?

객체나 배열의 값을 추출하여 변수에 할당하는 것

 

 

객체구조분해할당

기본형태: {추출하고 싶은 특정 값} = 객체

 

예시

const { data } = response

response 객체의 data 속성에 접근하고 그 값을 data라는 변수에 저장

 

response객체의 내부를 보면 {data:{...}, date:{...}, 기타등등...}

객체안에 여러가지 객체가 또 들어있다. 이중에서 data라는 이름의 객체만을 추출하고 그 값을 data라는 변수에 저장한다.

 

이렇게 함으로써 response.data라고 적을 필요 없이 data만 적어도 data안에 있는 값에 접근할 수 있다.

 

이렇게 객체구조분해할당의 기본형태에서 한단계 나아간 것이 새로운 변수이름 할당하기이다.

기본형태는 같고, 거기에 ':새로운 변수' 만 추가하면 된다.

---

객체구조분해할당 [새로운 변수이름 할당하기]

 

1. 사용이유

코드 가독성 향상, 변수이름변경, 코드 재사용

객체의 속성을 해체하여 새로운 변수명에 할당

 

2. 방법

{원본객체: 새로운 변수}

---

 

객체의 구조분해할당에도 여러가지가 있는데, 여기서는 객체의 속성을 해체하여 새로운 변수명에 담는 것에 대해 공부하겠다.

 

{원본객체: 새로운 변수}의 방법을 이용하면, 객체를 해체함과 동시에 새로운 변수명에도 담을 수 있어서 코드의 가독성을 향상시킬수 있다.

api로부터 data를 받아올 때는 대부분의 경우, 객체를 타고타고 들어가서 원하는 데이터를 꺼내와야하기때문에 유용하게 사용할 수 있다.

 

 

 

 ✅ 코드

const { data: movieDetail } = await axios.get(`movie/${movieID}`);

 

TMDB사이트에서 영화의 id를 사용해서 데이터를 get하는 코드이다. 

이 코드를 사용하면 특정1개의 영화의 데이터를 받아올 수 있다. 

이때 바로 const movieDetail = 과 같이 변수에 바로 할당할 수 있지만 굳이 이렇게 구조분해할당을 하는 이유는 코드의 가독성을 위해서이다. 

 

만약 const movieDetail = 와 같이 코드를 짰다고 가정해보자.

const movieDetail  = await axios.get(`movie/${movieID}`);

콘솔을 통해서 movieDetail 값이 어떻게 들어오는지 확인한다.

 

구조분해할당을 하지않으면 아래와 같이 객체안에 {data, status, statusText...}와 같은 값이 모두 movieDetail에 담긴다.

내가 원하는 값만 사용하고 싶다면 movieDetail.data.title과 같이 데이터에 접근해야 할 것이다.

 

이제 객체구조분해할당을 이용해보자.

const { data: movieDetail } = await axios.get(`movie/${movieID}`);

 콘솔을 통해서 데이터가 어떻게 들어오는지 확인한다.

위와는 다르게, movieDetail이라는 변수안에 바로 data에 담겨있는 정보들만이 들어간 것을 확인할 수 있다.

 

이제 title에 접근할때도 굳이 data를 적을 필요없이, movieDetail.title만 적어도 될 것이다.