[Javascript/React 오류 해결 방법] Uncaught TypeError: Invalid attempt to destructure non-iterable instance.

1. Problem

React/Js 를 사용하다 보면 Uncaught TypeError: Invalid attempt to destructure non-iterable instance 와 같은 이슈를 확인할 수 있습니다. 아래의 이슈는 왜 발생하는 것이며 어떻게 해야 해결할 수 있을까요?

Uncaught TypeError: Invalid attempt to destructure non-iterable instance.
In order to be iterable non-array objects must have a symbol.iterator () method

2. Solution

위의 에러가 발생한 이유는 바로 구조분해할당(destructuring)을 잘 못 했기 때문입니다. 자바스크립트 구조분해할당은 Object를 받는 경우 Object 타입으로 데이터를 받아주어야 합니다. 하지만 아래의 예시와 같이 Object를 return 해주는데, Array를 이용하여 구조분해할당을 받아주면 에러가 발생합니다. 아래와 같이 배열을 객체로 변경하여 손쉽게 에러를 해결할 수 있습니다.

// Error : 객체를 배열로 구조분해할당 시도함!!
const someFunction = e => {
	const [ value ] = e.target;     
    setValue(value);
}

// Not error : [] 를 {}로 바꿔줌 -> 정상적인 구조분해할당
const someFunction = e => {
	const { value } = e.target;     
    setValue(value);
}