[20240507] 앱개발 시작하기 #16 | 이벤트 핸들링

이벤트 핸들링

웹 내부에서 발생하는 사용자의 행동

EX) 버튼 클릭, 메세지 입력, 스크롤 등

[이벤트 핸들러] - onClick, onMouseEnter

1. 직접

const Button = ({text,color}) => {
    return(
    <>
    <button onClick={()=>{
        console.log(text)
    }} style={{color : color}}>
        {text} - {color.toUpperCase()}
    </button>
    </>
    )
}

Button.defaultProps = {
    color: "black",
}

export default Button;

2. 함수형

const Button = ({text,color}) => {
    const onClickButton = () => {
        console.log({text});
    }

    return(
    <>
    <button onClick={onClickButton} style={{color : color}}>
        {text} - {color.toUpperCase()}
    </button>
    </>
    )
}

Button.defaultProps = {
    color: "black",
}

export default Button;

합성 이벤트

모든 웹 브라우저의 이벤트 객체를 하나로 통일한 형태

Cross Browsing Issue : 브라우저 별 스펙이 달라 발생하는 문제