• onClick
  : 사용자가 클릭했을 때 발생하는 이벤트

예제

버튼 클릭 시 input에 입력한 내용을 alert로 알림 창 띄우기

❌ 틀린 전달 방법 - OnClick={함수()}

OnClick={alert(name)}
alert 함수를 바로 호출시,
컴포넌트가 렌더링될 때 함수 자체가 아닌 함수 호출의 결과가 onClick에 적용된다. 그래서 버튼 클릭시가 아닌 렌더링될 때 alert가 실행되고
undefined(함수가 리턴값이 없을때는 undefined 호출한다)이 onClick에 적용되어 아무런 결과가 나타나지 않는다.

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>]
      //틀린방법. alert함수를 바로 호출하면, 바로 실행되버림
      <button onClick={alert(name)}>Button</button>
      <h1>{name}</h1>
    </div>
  );
};

✅ 올바른 함수 전달 방법

1. 화살표함수 정의 방법

• onClick={() => alert(name)}
  화살표함수를 사용하여 정의해야 컴포넌트 state(여기선 name)에 함수들이 접근할 수 있다.

return (
    <button onClick={() => alert(name)}>Button</button>
  );

2. 함수 자체를 전달

클릭이벤트가 발생했을 때만, 함수 실행하도록 함

• onClick={handleClick}

const handleClick = () => {
  alert(name);
};

return (
    <button onClick={handleClick}>Button</button>
  );