[React] 이벤트 처리

📑이벤트 핸들링 (Event Handling)

• 이벤트가 발생했을 때 그것을 처리하는 것 (ex) 버튼 클릭 시 경고창 노출
• 카멜케이스로 작성된다. (ex) onClick, onChange

이벤트 핸들러 (익명함수)

이벤트 핸들러 (컴포넌트 내부에 함수 생성)

각 버튼 설명시 log가 나온다.

 

📍자주 쓰이는 이벤트 타입

📌 Form 이벤트

• onClick (click event) : Element의 마우스나 키보드가 클릭 된 경우 발생
• onChange (change event): Element의 내용이 변경된 경우 발생
• onSubmit (submit event): Form의 데이터가 전송될 때 발생

📌 Keyboard 이벤트

• onKeyDown (keydown event): 키보드 버튼이 눌린 경우 발생 ( 값 입력 전에 발생하고 특수키(ctrl, alt)에만 동작) 
• onKeyUp( ketup event): 키보드 버튼을 눌렀다가 뗀 경우 발생
• onKeyPress (keypress event): 키보드 버튼이 눌러져 있는 경우 발생 (특수키 인식 못함)

📌 Mouse 이벤트

• onMouseMove (mousemove event): 마우스 커서가 Element 위에서 움직일 때 발생
• onMouseDown (mousedown event): 마우스 위에서 클릭이 되기 시작할 때 발생
• onMouseUp (mouseup event): 마우스 버튼 클릭이 끝날 때 발생

---

📑이벤트 객체

이벤트 핸들러 함수를 호출하면서 호출된 이벤트 함수에 매개변수로 이벤트 객체를 제공한다.

const Button = ({ text, color = "black", children }: ButtonProps) => {
    const onClickButton = (e: React.MouseEvent<HTMLButtonElement>) => {
        console.log(e);
        console.log(text);
    };

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

합성 이벤트 객체 (e에 저장된 이벤트 객체)

 

❓ 합성 이벤트 객체 (Synthetic Event)

• 모든 웹 브라우저의 이벤트 객체를 하나로 통일한 형태 (크롬, 엣지, 웨일 등 브라우저를 만드는 회사가 다르기 때문에 웹브라우저마다 동작이 다르다고 한다!)
• Cross Browsing Issue (브라우저 별 스펙이 달라 발생하는 문제)를 해결해주기 위해 사용된다.
• 발생한 이벤트와 관련된 모든 정보가 들어가 있다.