[React] 클릭 외 이벤트

안녕하세요! 이전 글에서는 리액트에서 클릭 이벤트를 다루는 방법을 살펴보았습니다. 이번에는 클릭 외에도 다양한 이벤트 유형을 리액트에서 어떻게 다루는지에 대해 알아보겠습니다.

 

1. 다양한 이벤트 유형

리액트에서는 클릭 외에도 다양한 이벤트 유형을 다룰 수 있습니다. 마우스 오버, 더블 클릭, 복사, 잘라내기, 포커스, 키 누름 등 다양한 유효한 DOM 이벤트가 있습니다. Mozilla 개발자 네트워크에서 해당 이벤트들의 목록을 확인할 수 있습니다.

 

2. 이벤트 처리 방법

이벤트 처리는 간단합니다. 마우스 오버 이벤트를 예시로 들어보겠습니다. Clicker 컴포넌트에서 다음과 같이 코드를 작성합니다.

// Clicker.jsx

function handClicker() {
    console.log("Clicked!!");
}

function HandleHover(){
    console.log("HOVERED!!");
}

export default function Clicker(){
    return (
    <div>
      <p onMouseOver={HandleHover}>Hover Over Me</p>
      <button onClick={handClicker}>Click</button>
    </div>
  );
}

위 코드에서 onMouseOver 속성에 handleHover 함수를 전달하여 마우스 오버 시 해당 함수가 호출되도록 합니다. 클릭 이벤트도 함께 보여드리기 위해 버튼도 추가했습니다.

3. 주의사항

• 이벤트 이름은 카멜 케이스로 작성해야 합니다. Vanilla JavaScript에서의 이벤트 이름과 달리 리액트에서는 카멜 케이스를 사용해야 합니다.

4. 다양한 이벤트 활용 예시

클릭, 마우스 오버 등 간단한 예시를 통해 이벤트 처리의 기본을 익혔습니다. 리액트에서는 이벤트를 활용하여 다양한 상호 작용을 구현할 수 있으며, 다음 글에서는 양식 제출과 같이 더 복잡한 이벤트 처리에 대해 다뤄볼 예정입니다.

 

이제 여러분은 리액트에서 클릭 외의 다양한 이벤트를 다루는 기초를 익혔습니다. 계속해서 리액트의 다양한 기능을 탐험하며 프론트 엔드 개발을 더욱 풍부하게 만들어 나갑시다! 🚀