외부에 선언한 후 바인딩

외부에서 이벤트 핸들러를 선언하고 이를 컴포넌트에 바인딩하는 방법은 아래와 같습니다.

function **handleClick()** {
    console.log('Button was clicked!');
}

function MyButton() {
    return (
        <button onClick=**{handleClick}**>
            Click me!
        </button>
    );
}

이 방법은 handleClick 함수가 한 번만 생성되며, 여러 컴포넌트에서 재사용 가능하다는 장점이 있다. 하지만 이런 방식은 함수가 컴포넌트의 props나 state에 접근할 수 없다는 단점이 있다.

인라인 바인딩 (화살표 함수 사용)

이벤트 핸들러를 직접 인라인으로 작성하는 방법은 아래와 같다.

function MyButton() {
    return (
        <button **onClick={() => console.log('Button was clicked!')}**>
            Click me!
        </button>
    );
}