React Hooks / Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `string` type. 에러 해결

Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `string` type.
Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `object` type.
Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `boolean` type.

 

 

 

 

위의 에러 구문이 발생하는 원인은 리액트의 이벤트 핸들러(event handler)는 반드시 '함수' 형태로 받아야 하는데, '함수가 아닌 다른 형식'으로 받았기 때문입니다.
해결 방안은 onClick이 모두 함수형으로 받아졌는지 확인하고, 그렇지 않으면 함수로 받도록 수정합니다.

 

const [selected, setSelected] = useState(null);

// 함수화
const handleChange = (event) => {
    setSelected(event.target.value);
  };
  
  
  <Button onClick={handleChange}></Button>

 

위의 코드와 같이 함수화를 한 뒤, onClick에 해당 함수를 받도록 해야 합니다.

onClick 뿐만 아니라 onChange 등도 마찬가지겠죠?

 

리액트 핸들러에 대해 개념이 없다면, 단순한 벨류나 boolean 변경만 하는 이벤트를 줄 때 굳이 함수화를 하지 않아도 되겠다하고 생길 수 있는 실수이므로 꼭 참고해 주세요.