[React] 이벤트 핸들러

📍 React Event

• HTML DOM 이벤트와 마찬가지로 사용자 이벤트에 따라 작업을 수행할 수 있음.
• 리액트에는 HTML과 동일한 이벤트가 있음
• 클릭, 더블클릭, 체인지 등등.

 

 

 

 

📍 함수를 넣으려면???

• 함수를 넣을 때는 중괄호 {} 에 넣어야함.
• <button onClick={sayHi}>인사버튼</button> 
• 화살표함수 처리 :: <button onClick={  () => sayHi("홍길동") }>인사버튼</button>
• 익명함수 처리 :: <button onClick={ function(){sayHi("홍길동")} }>인사버튼</button>
• 익명함수와 화살표함수 에는 this 의 처리에 대해서 다르게 작동하기 때문에... 주의해야함.
  • 일반 함수 --> "누가 불렀는지"
  • 화살표 함수 --> "어디서 태어났는지"

import { createRoot } from 'react-dom/client';

function App() {
    const sayHi = (name, e) => {  // const sayHi = function (name){~} // 여기서는 둘다 동일.
        alert(`${name}님 안녕하세요, \n e.type은 --  ${e.type}`);
        console.log(e.type);
    }

    return (
        // <button onClick={ function(){ sayHi("홍길동") }}>인사버튼</button> // 익명함수
        // <button onClick={ () => { sayHi("홍길동") }}>인사버튼</button> // 화살표함수 // 리액트에서는 화살표함수를 주로 써야함.
        // 인수 전달할 때는 무조건 화살표 함수 써야함.
        // <button onClick={ sayHi("홍길동") }>인사버튼</button> // 클릭하지 않아도 바로 alert 창 뜸.


        <button onDoubleClick={ (event) => { sayHi("홍길동", event) }}>인사버튼</button> // sayHi 함수를 트리거한.(발생시킨) 이벤트에 접근할 수 있는 것임. event 
    )
}

createRoot(document.getElementById('reactEvent')).render(
    <App />
);

 

---

출처 : 

[왕초보 홈페이지만들기 리액트 기초 강의]

https://www.youtube.com/watch?v=kgo-ZUdd004&list=PLTb3qGCzYjS2AliTIbz9eAGjZSdEQa3m1&index=19

 

 

---

개발 공부를 위한 블로그 입니다. 

오류가 있다면 댓글로 알려주세요! 

감사합니다.