비구조화할당과 구조분해할당 이라는 개념은 같은 개념입니다.
위와 같은 객체가 있고, 여기서 각각의 key, value를 따로 뽑아 저장하고 싶을때,
물론 child.name 과 같이 사용해 되지만, 여러번 작성하게되는 불편함이 있습니다.
이렇게 각각의 상자에 담아 주는 방법이 있지만 이것을 구조분해할당한다면,
이런 식으로 한번에 작성해 줄 수 있습니다. 이것을 객체의 구조분해할당 이라고 합니다.
우리는 이러한 구조를 사실 이미 사용하고 있었습니다. useQuery를 기억하시나요? 우리는 useQuery를 사용할 때, 이렇게 작성해주었습니다.
const {data, refetch, fetchMore} = useQuery()그렇다면 우리는 이런식으로도 사용이 가능하겠죠?
const result = useQuery()
console.log(result.data)
console.log(result.refetch)즉, useQuery라는 함수가 실행된 후 return되는 값이 객체이기 때문에 우리는 이런 식으로 사용할 수 있던 것입니다.
배열의 구조분해할당의 경우, 아래와 같은 형식으로 작성하게 되는데 배열의 길이가 길어진다면 이 방법 또한 사용이 어려워 지겠죠?
배열 또한 구조분해할당을 통해 이런 형식으로 간결하게 작성할 수 있습니다. 지금 예시의 경우 철수 , 영희 , 훈이가 순서대로 child1 , child2 , child3 에 들어가게 됩니다.
예상하셨겠지만 이런 형식 또한 우리는 사용하고 있었습니다. useState()를 생각해 볼까요?
const [데이터, 데이터를바꿔주는함수] = useState()배열 또한 이런식이 될 수 있다는 것입니다.
const result = useState()
console.log(result[0]) // 데이터
console.log(result[1]) // 데이터를 바꿔주는 함수지금까지의 예시로 보았을때 객체의 구조분해할당과 배열의 구조분해할당의 가장 큰 차이로는,
객체는 이름이, 배열은 순서가 중요했습니다.
따라서 배열은 순서만 맞춰준다면 이름은 어떤 것을 넣어주든 상관이 없습니다.
const[aaa, setAAA]= useState() 만 생각해봐도 알 수 있는 사실입니다!
