[React.js / javascript] 구조 분해 할당 시 오류 발생 (JS 객체와 배열의 차이)

 

TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator)) at handleRegTest (http://localhost:3000/main.9345674c7ec34bc46fb5.hot-update.js:64:27)

 

 

 

 

 

구조분해할당을 시도할 때 발생할 수 있는 에러이다. 

이는 구조 분해 할당의 대상이 되는 객체가 실제로 이터러블이 아닌 경우 발생한다. 

 

확인할 점 

1. 구조분해할당 대상 확인 : 구조분해 할당을 시도하는 대상이 실제로 이터러블인지 확인 (배열이나 객체를 구조분해 하려고 할때 대상이 올바른지 확인해야함.) 

 

처음에는 이벤트 핸들러를 호출하는 곳이 여러개가 아니라서 그런가? 헷갈렸는데 

상당히 기본적인 실수였다. 

 

수정 전 

  const handleRegTest = (e) => {
    console.log("handleRegTest() 호출");
    console.log(passwordRef.current.value);
    console.log("event : ", e.target.name);
    const [name, value] = e.target;
    // if (!regTest(name, value)) {
    //   alert(hintMsg.password);
    // }
    console.log(name, value);
  };

 

수정 후 

  const handleRegTest = (e) => {
    console.log("handleRegTest() 호출");
    console.log(passwordRef.current.value);
    console.log("event : ", e.target.name);
    const { name, value } = e.target;
    // if (!regTest(name, value)) {
    //   alert(hintMsg.password);
    // }
    console.log(name, value);
  };

 

구조분해 할당을 할때 name, value를 감싸는 부분을 [] 배열 타입으로 선언을 해버렸다.

다시 {}로 수정하자 정상적으로 작동한다. 

 

{  }와 [  ]의 차이 

• 객체 구조 분해 할당 
  • {}를 사용하여 객체의 속성을 추출 
  • 키-값 쌍으로 구성되어있음

const obj = {name : "minhee", age : 20};
const {name, age} = obj;
console.log(name); // "minhee" 
console.log(age); // 20

 

• 배열의 구조 분해 할당 
  • []를 사용하여 배열의 요소를 추출
  • 순서가 있는 요소들의 집합

const arr = ["minhee", 20];
const [firstName, age] = arr; 
console.log(firstName); // "minhee"
console.log(age); // 20

 

변수의 첫번째 요소와 두번째 요소를 각각 firstName, age에 할당하게 된 것.

 

정리 

 

객체형태는 key-value 형태이니까 {}로 꺼내면 각각의 속성에 맞는 변수가 할당이 되는데

배열의 경우에는 순서대로 값이 할당이 되기 때문에 오류가 발생하는 것이다. 

즉, 나의 실수를 분석해보면 분명 e.target에 있는 것들은 각각 속성이 key-value로 존재하는 객체의 형태인데 

[]을 사용하여 배열로 할당을 하려고 하니 오류가 발생하는 것이다.