이슈

수많은 유저 정보를 user라는 하나의 객체로 전달하려던 중에
iterable instance 에러가 발생하였습니다.

user 정보를 받고, setState로 관리되고 있는 토글로 변경되는 활성/비활성 상태만 따로 저장하려던 상황이었습니다.

코드는 아래와 같습니다.

const handleSubmit = (e) => {
  e.preventDefault();
  if (validate()) {
    handleSave(...user, enable);
  }
};

해결

handleSave(...user, enable)에서 user 객체를 스프레드 연산자로 사용하려고 할 때 발생하는 오류입니다. 이는 user가 배열이 아닌 객체이기 때문입니다. 스프레드 연산자는 배열이나 이터러블 객체에만 사용할 수 있습니다.

handleSave 함수는 여러 개의 인자를 받는 것이 아니라 하나의 객체를 받아야 합니다. 따라서, user 객체와 enable 값을 함께 하나의 객체로 만들어 handleSave에 전달해야 합니다.

괄호 하나만 추가해서 객체로 만들어주면 되는 아주 간단한 문제였습니다!
코드는 아래와 같습니다.

handleSave({ ...user, enable });

위 코드에서 ...user 형태가 어떻게 동작하는지는 아래 글을 참고해주세요.
https://velog.io/@suji5358/react-효과적이고-안전하게-useState로-값을-업데이트-하는-방법-feat.-함수형-업데이트