이벤트 핸들링

JSX는 Javascript, HTML과 다르게 속성에 대한 명명을 카멜식 표기법을 사용하고 사용할 함수는 글자가 아닌 중괄호 내부에 함수가 들어간다.

클릭 이벤트

import React from 'react'

function FunctionClick() {
    function clickHandler() {
        console.log('버튼 클릭')
    }

    return (
        <div>
            <button onClick={clickHandler}>클릭</button>
        </div>
    )
}

export default FunctionClick

(일반 자바스크립트 일 경우)

	<button onclick='clickHandler()'>클릭</button>

자주하는 실수

{evnetHandler()}

처음 브라우저에서 로드 됐을때 해당 함수가 실행이 되고 클릭 이벤트가 정상적으로 작동하지 않는다.
괄호를 추가하지 않는 방법으로 고쳐야 한다.

만약 함수에 전달할 인자가 있는경우

<button onClick={() => clickHandler(인자)}>클릭</button>

화살표 함수를 사용하여 인자를 넣어준다.