코드에서 onClick 이벤트 속성 안에 화살표 함수를 직접 작성했습니다. 이처럼 인라인 핸들러 방식은 이벤트 핸들러를 간단하게 할당할 수 있고 코드가 간결해 유용합니다.

● 함수 참조

인라인 핸들러는 JSX 안에 이벤트 핸들러를 직접 작성하는 방식이었습니다. 반대로 함수 참조는 이벤트 핸들러를 컴포넌트 바깥(JSX 바깥)에 따로 정의하고, 해당 함수를 참조해 이벤트 속성에 할당하는 방식입니다.

다음 코드는 JSX 외부에 clickHandler() 함수를 정의하고 onClick 속성에 함수 이름을 전달합니다. 이렇게 하면 버튼을 클릭했을 때만 함수가 실행됩니다.

src/App.tsx

export default function App() {

  const clickHandler = () => {
    alert('Button clicked!');
  };

  return (
    <>

      <button onClick={clickHandler}>click</button>

    </>
  );
}