React - 컴포넌트 이벤트(onClick 등)에 조건을 넣는 방법

React 컴포넌트에서 button 등에 이벤트 발생 시(클릭 등) 특정 function을 호출하려고 할 때, 조건을 넣으려면 다음과 같이 작성하여야 한다.

<button onClick={condition ? value : undefined}>
  Click
</button>

만약 아래와 같이 작성한다면, 동작은 될 지 모르나, React에서 console창으로 경고를 보낸다.

<button onClick={condition && value}>
  Click
</button>

console 경고창

index.js:1 Warning: Expected `onClick` listener to be a function, instead got `false`.

If you used to conditionally omit it with onClick={condition && value}, pass onClick={condition ? value : undefined} instead.

올바른 예시

import React, { useState } from 'react';

function Subscribe({ userTo, userFrom }) {
  const [Toggle, setToggle] = useState(false);

  const onSubscribe = () => {
    setToggle(prevToggle => !prevToggle);
  };

  return (
    <div>
      <button onClick={!Toggle ? onSubscribe : undefined}>
	Toggle
      </button>
    </div>
  );
}

export default Subscribe;