React this.function vs this.function( )

import React from "react";
import { withRouter } from "react-router-dom";

import "./Login.scss";

class Login extends React.Component {
  constructor() {
    super();
    this.state = {
      idInput: "",
      pwInput: "",
    };
  }
  goToMain = () => {
    this.props.history.push("/hyunjung/main");
  };

  inputHandler = (e) => {
    const { value, name } = e.target;
    this.setState({
      [name]: value,
    });
  };

  loginButtonDisableHandler = () => {
    const { idInput, pwInput } = this.state;
    if (idInput.includes("@") && pwInput.length >= 4) return false;
    return true;
  };

  render() {
    return (
      <div className="Login">
        <div className="borderBox">
          <div className="imgBox">
            <img
              alt="westagram text logo"
              src="/images/hyunjung/logo_text.png"
              className="logo"
            />
          </div>
          <div className="inputBox">
            <input
              type="text"
              className="loginId"
              placeholder="전화번호, 사용자 이름 또는 이메일"
              onChange={this.inputHandler}
              name="idInput"
            />
            <input
              type="password"
              className="loginPw"
              placeholder="비밀번호"
              onChange={this.inputHandler}
              name="pwInput"
            />
          </div>
          <button
            className="loginBtn"
            onClick={this.goToMain}
            disabled={ }
          >
            로그인
          </button>
          <button className="findPw">비밀번호를 잊으셨나요?</button>
        </div>
      </div>
    );
  }
}

export default withRouter(Login);

위 코드를 짜다가 맞이했던 궁금증이었다.
button 의 disabled를 관리해주기 위해 loginButtonDisableHandler라는 함수를 작성했는데, disabled={this.loginButtonDisableHandler}로 작성했을 때 엄창난 에러를 돌려줬다.

disabled를 사용할 수 없다는 것이었다 tada-

웨ㅔㅔㅔ 안돼ㅐㅐㅐ
하면서 열심히 뚝딱거린 결과 this.loginButtonDisableHandler() 로 작성하니 또 잘 된다. 흠. 대체 무엇이 문제인가. 뚝딱뚝딱.

추측컨데 함수의 실행 순간과 관련이 있는 것 같다..
onClick, onKeyUP 등의 이벤트와 관련된 함수의 경우, 이벤트가 발생될 경우 함수를 호출해 결과를 받아오지만, disalbed 의 경우에는 이벤트와 관련되지 않고 언제나 상태가 유지되어야하는 특성, 차이가 있었다.

따라서 이벤트 핸들러의 경우 이벤트가 발생될 경우만 실행이 되어야하니 this.eventHandler 로 불러와도 되는거였지만, disabled와 같은 경우는 this.eventHandler() 로 작성해 컴포넌트의 jsx가 랜더되는 동시에 함수가 실행되도록 해야했던 것이다.

this.loginButtonDisableHandler로 작성했을 경우, 함수의 실행 결과값이 아닌 함수 자체가 disabled에 담겨있었기 때문에, 계속해서 disabled의 value값이 맞지 않으니 수정하라는 오류메세지가 빠밤 하고 뜬 것이다. 라고 생각한다.

: 그 외
내가 하려던 방법 외에도 button의 disabled가 state를 바라보게 하는 방법도 찾을 수 있었고, 함수 내부에 있는 조건을 변수로 설정해서 변수조건과 맞으면 false, 아니면 true를 반환하게 하는 방법도 있었다.