[React Error] expected `onclick` listener to be a function, instead got a value of `object` type.

 

안녕하세요? 수구리입니다.

React를 혼자서 공부를 하던 도중 뭔가 이런 에러가 자주 보여서

기록을 해두면 좋을 것 같아서 글을 쓰게 되었습니다..

 

우선 위의 에러가 발생하는 상황을 설명하자면..

부모 컴포넌트에서 자식 컴포넌트에게 무엇인가 전달을 할 때이다.

예를 들어 상태가 담긴 배열이라던지,, 또는 부모 컴포넌트에 있는 Trigger 함수라던지 등등을 보낼 때 발생한다.

 

좀 더 자세히 들어가 보면

export class MainPanel extends Component {
  state = {
    // 부모 컴포넌트에서 state, trigger 함수 정의
    searchTerm: "",
    searchResults: [],
    searchLoading: false,
  };
  
  // 트리거 함수
  handleSearchChange = (event) => {
    this.setState(
      {
        searchTerm: event.target.value,
        searchLoading: true,
      },
      () => this.handleSearchMessages()
    );
  };
  
}

 

위의 코드에서 처럼 MainPanel이라는 컴포넌트가 있다고 가정하자.

그리고 이제 handleSearchChange라는 함수는 Trigger 함수로 자식 컴포넌트에게 전달하려고 하는 함수이다.

 

아래처럼 render( ) 하는 부분에서 자식 컴포넌트를 추가하는 부분이다.

render() {
    const { messages, searchTerm, searchResults } = this.state;
    return (
      <div style={{ padding: "2rem 2rem 0 2rem" }}>
        {/* 자식 컴포넌트에게 trigger 함수 전달 */}
        <MessageHeader handleSearchChange={this.handleSearchChange} />

        <div
          style={{
            width: "100%",
            height: "450px",
            border: ".2rem solid #ececec",
            borderRadius: "4px",
            padding: "1rem",
            marginBottom: "1rem",
            overflowY: "auto",
          }}
        >
          {searchTerm
            ? this.renderMessages(searchResults)
            : this.renderMessages(messages)}
        </div>

        <MessageForm />
      </div>
    );
  }

위의 코드는 MainPanel이라는 Class 컴포넌트가 끝나는 부분이다.

주석을 처리한 곳을 보면, MessageHeader라는 자식 컴포넌트에게 아까 전에 본 Trigger 함수가 보인다.

그 함수를 인자로 넘겨주는 모습이다.

 

그리고 이제 자식 컴포넌트 쪽을 보면

// 부모의 trigger 함수를 인자로 받아옴
function MessageHeader({ handleSearchChange }) {
  return (
    
    // 생략
  );
}

이처럼 받아올 수 있다. 여기서 이제 사용하려고 하는 인자의 { } 중괄호를 빼먹는다면 발생하는 오류이다.

 

아래의 코드는 실제 사용되는 부분인데..

<FormControl
  // 부모 trigger 함수 사용
  onChange={handleSearchChange}
  placeholder="대화 내용 검색"
  aria-label="Search"
  aria-describedby="basic-addon1"
/>

잘 보면 함수를 사용하는 부분은 onChange 부분이다. 그렇지만

막상 오류는 onClick ~ 어쩌고라고 되어있어서 헷갈렸던 것 같다.

오류가 onClick으로 뜬다고 해서 그쪽 부분만 보는 게 아니라 onChange 부분도 보자?!