> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/learning-react-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/learning-react-app/tip-and-references/js-frequently-used-in-react/destructuring-assignment.md).

# Destructuring assignment

[구조 분해 할당(Destructuring Assignment)](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)은 **배열 또는 객체 구조를 분해하여 재할당**하는 아주 멋진 기능입니다.

```javascript
const state = {
  loading: false,
  error: null,
  data: [
    {id: 'kwdvj2ke1', title: 'euid'},
    {id: 'zwecr8kip', title: 'react'},
    {id: 'jdw1vkke1', title: 'gitbook'}
  ]
}

const { loading, error, data } = state
const [ firstData, ...restData ] = data

// 위 코드 대신, 아래와 같이 인라인으로 작성 가능
const { loading, error, data: [ firstData, ...restData ] } = state


// ES5 ———————————————————————————————————————————————————————————


var loading = state.loading
var error = state.error
var firstData = state.data[0]
var restData = state.data.slice(1)
```