Warning: Expected `onClick` listener to be a function, instead got a value of `object` type. (prop의 구조분해할당, 중괄호를 안했을때)

 

모달창을 만들었는데, 닫기버튼을 누르면 이러한 에러메시지가 발생하였다.

 

직역을 하면,

경고: onClick 리스너는 함수가 되어야 하는데, 객체 형식의 값이 전달되었습니다.

라는 의미이다.

 

🔍 원인

말그대로 onClick에 함수가 전달되어야하는데 객체가 전달이 되어서

(= prop으로 전달된 함수가 구조분해되지 않아서)

➡️ 내가 전달하려고 한 함수가 아니라 객체자체가 전달됨!!

 

 

 

✅ 해결

이 에러를 이해하려면 구조분해할당부터 이해해야한다.

🔫 구조분해할당(비구조화, destructing)

객체에서 원하는 속성만 추출하여 변수로 선언할 수 있다. 이를 객체 구조분해문법(비구조화 문법)이라고 한다.

리액트 컴포넌트에서는 중괄호를 {} 사용하여 구조분해할당을 할 수 있다.

 

간단한 예를 들면 아래와 같다.

// 비구조화 전
function greet(person) {
  console.log(`Hello, ${person.name}!`);
}
greet(person); // Hello, John!


// 비구조화 후
function greet({ name }) {
  console.log(`Hello, ${name}!`);
}
greet(person); // Hello, John!

 

 

 

💻 이전 코드

export default function SignUp( handleCloseModal ) {

 

<button className="close" onClick={handleCloseModal}>

<FontAwesomeIcon icon={faXmark} />

</button>

handleCloseModal이라는 값을 prop으로 받아오면서 중괄호를 해주지 않았다.

= Login 페이지에서 handleCloseModal이라는 이름의 prop을 받아오면서,

그 함수안의 handleCloseModal이라는 함수를 추출하지 않는다는 것을 의미한다.

(handleClodeModal이라는 이름의 객체전체를 prop으로 받아옴)

 

 

💻 수정한 코드

export default function SignUp({ handleCloseModal }) {

return (

 

<button className="close" onClick={handleCloseModal}>

<FontAwesomeIcon icon={faXmark} />

</button>

prop으로 받아오는 값에 중괄호를 추가해 줌으로써, prop안에 있는 함수만을 추출할 수 있다.

 

👍 이렇게해서 에러 해결!! 👍 

 

 

🕵️‍♀️ 느낀점

평소에 prop을 사용할때 중괄호를 항상 사용했는데, 실수로 빼먹어서 난 오류이다.

사실 해결하는 방법은 금방 알았지만, 왜 저런 오류가 발생하는지 궁금해서 더 공부를 해 보았다.

prop으로 사용되는 객체의 구조분해에 대한 이해가 부족했던거 같아서 이런 에러를 만나보아서 한번 더 공부할 기회가 된것같아 좋았다 😊