[React error] Warning: Expected `onClick` listener to be a function, instead got a value of `object` type.

유튜브 클론 프로젝트를 하면서

햄버거 바 (FiMenu) 클릭시 메뉴 숨기기 코드를 짜고 있었다.

코드를 처음엔 이렇게 짰다가

햄버거 바를 계속 클릭해도 숨겨지지가 않는 에러가 발생했다.

 

앞으로 리액트를 공부하면서

자주 발생할 것 같은 에러 같아서 기록하게 되었다.

 

콘솔 창을 확인해보니

Warning: Expected `onClick` listener to be a function, instead got a value of `object` type.

다음 사진과 같은 이런 에러가 적혀있었다. 

 

결론부터 말하자면 부모 컴포넌트에서 하위 컴포넌트에

무언가를 전달하면서 생긴 오류이다.

 

나는 현재 Menu의 state가 담겨있도록 만든

비구조화 할당 문법을 사용한 Props를

 onClickMenu  라는 함수 파라미터로 받아왔다.

 

---

 

여기서 잠깐 !!

 

Props란??

 

리액트에서 데이터는

상위 컴포넌트에서 하위 컴포넌트에게

내려보내는 단방향의 흐름을 가진다.

 

이 데이터의 흐름에서 자식에게 전달되는 데이터를

바로 Props라고 한다.

---

비구조화 할당된 데이터를

함수의 파라미터로 넘길 때에는 무조건

중괄호 { } 로 감싸주어야 한다.

 

나는 실수로 이를 중괄호로 감싸주지 않아 생긴 에러였던 거다.

 

고치고 난 후

↓

↓

 

< 오늘의 교훈 >

 

중괄호 { } 빼먹지 않기 !!

 

ꔷ̑◡ꔷ̑