[React] 이벤트 처리하기

리액트에서 이벤트 처리하기

 

이벤트란 웹 페이지에서 일어나는 사용자의 행위이다. 버튼 클릭, 페이지 스크롤, 새로고침 등이 이런 행위에 해당한다. 따라서 사용자가 버튼을 클릭하면 버튼 클릭 이벤트, 텍스트를 입력하면 텍스트 변경 이벤트가 발생했다고 표현한다.

 

[이벤트 핸들링]

 

• 카멜케이스 표기 : onClick
• onClick={함수 이름}
  • 함수 이름 명시

 

[이벤트 핸들러]

 

• 여기서 handleOnClick을 이벤트를 실질적으로 처리하는 함수라는 의미에서 '이벤트 핸들러'라고 한다.
  • 동작 진행
• 이벤트 핸들러를 설정할 때는 함수 호출의 결과값을 전달하는 것이 아니라 콜백 함수처럼 함수 그 자체를 전달한다. 

 

function Body() {
    function handleOnClick() { 📌//이벤트 핸들러
      alert("버튼 클릭!");
    }
    
    return (
    	<div className="body">
        	<button onClick={handleOnClick}클릭하세요</button> 📌
        </div>
    );
}
export default Body;

 

 

[이벤트 객체 사용하기] - 매개변수 e

 

• 리액트에서는 이벤트가 발생하면 이벤트 핸들러에게 이벤트 객체를 매개변수로 전달한다.
  • 이벤트 객체에는 이벤트가 어떤 요소에서 어떻게 발생했는지에 관한 정보가 상세히 담겨 있다.
  • 이벤트 객체는 이벤트를 처리하는 데 필요한 많은 정보를 담고 있다.

 

function Body() {
    function handleOnClick(e) { 📌//이벤트 핸들러
      console.log(e.target.name);
    }
    
    return (
    	<div className="body">
            <button name="A 버튼" onClick={handleOnClick} 📌
            	A 버튼
            </button>
            <button name="B 버튼" onClick={handleOnClick} 📌
            	B 버튼
            </button>
        </div>
    );
}
export default Body;

 

• 이벤트 객체의 target 프로퍼티에는 이벤트가 발생한 페이지의 요소(여기서는 버튼)가 저장된다.
• A 버튼을 클릭하면 e.target에는 A 버튼이 저장되고, B에서 e.target.name을 콘솔에 출력하면 현재 이벤트가 발생한 요소의 name 속성값을 출력하게 된다.
• 복잡한 이벤트 처리가 아니면 실무에서는 대체로 1~2개의 값만 활용하므로 이 값들을 모두 상세히 알 필요는 없다.

 

합성 이벤트란(Synthetic Event)? 

 

• 모든 웹 브라우저의 이벤트 객체를 하나로 통일한 형태 (통일된 규칙)
• 발생한 모든 이벤트에 대한 정보가 들어있음
• 브라우저 마다 Event 객체가 서로 다름 ➡️ Cross Browsing Issue 발생
• Cross Browsing Issue를 해결해주는 것이 리액트의 합성 이벤트

 

 

📕참고: 한 입에 잘라 먹는 리액트 - 이정환