[FRONTEND]리액트 Event Handling

https://ko.legacy.reactjs.org/docs/handling-events.html

이벤트 처리하기 – React

---

폴더 생성

정상적으로 실행하는 지 확인

// react 에서는 onMouseOut 이벤트도 camelCase 형식의 네이밍 형식을
// 사용합니다. onMouseOut 이벤트는 특정 tag 영역 안에 마우스 커서가
// 진입했다가 벗어날 때 발생합니다.

    // MouseOut이라는 함수를 선언하고 전달 받은 파라미터를 tag라는
    // 함수의 내부 변수에 넣어 사용합니다.

이벤트 함수 호출

            {/* div 태그 영역에 마우스 커서가 진입했다가 벗어날 경우
                MouseOut 함수를 호출합니다. 파라미터로 넘긴 div가
                본소스 로그로 출력됩니다.  */}

       {/* input 태그 영역에 마우스 커서가 진입했다가 벗어날 경우
                MouseOut 함수를 호출합니다. 파라미터로 넘긴 input이
                본소스 로그로 출력됩니다.  */}

            {/* select 태그 영역에 마우스 커서가 진입했다가 벗어날 경우
                MouseOut 함수를 호출합니다. 파라미터로 넘긴 select가
                본소스 로그로 출력됩니다.  */}

ReactMouseOut

// react 에서는 onMouseOut 이벤트도 camelCase 형식의 네이밍 형식을
// 사용합니다. onMouseOut 이벤트는 특정 tag 영역 안에 마우스 커서가
// 진입했다가 벗어날 때 발생합니다.
import React, { Component } from 'react';

class ReactMouseOut extends Component {
    // MouseOut이라는 함수를 선언하고 전달 받은 파라미터를 tag라는
    // 함수의 내부 변수에 넣어 사용합니다.
    MouseOut(tag){
        // tag 변수를 로그로 출력합니다.
        console.log('TAG :' + tag);
    }
    render() {
        return (
            <div>
            {/* div 태그 영역에 마우스 커서가 진입했다가 벗어날 경우
                MouseOut 함수를 호출합니다. 파라미터로 넘긴 div가
                본소스 로그로 출력됩니다.  */}
                <div onMouseOut={e => this.MouseOut("div")}>
                    <h3>DIV onMouseOut</h3>
                </div>
            {/* input 태그 영역에 마우스 커서가 진입했다가 벗어날 경우
                MouseOut 함수를 호출합니다. 파라미터로 넘긴 input이
                본소스 로그로 출력됩니다.  */}
                <input type='text' onMouseOut={e => this.MouseOut("input")}/>
            {/* select 태그 영역에 마우스 커서가 진입했다가 벗어날 경우
                MouseOut 함수를 호출합니다. 파라미터로 넘긴 select가
                본소스 로그로 출력됩니다.  */}
                <select onMouseOut={e => this.MouseOut("select")}>
                    <option value={"react"}>react</option>
                    <option value={"2023"}>2023</option>
                </select>
            </div>

        );
    }
}

export default ReactMouseOut;

 

import React from 'react';
import ReactMouseOut from './ReactMouseOut'

const App = () => {
  return (
    <div>
      <h1>Start React 2023</h1>
      <ReactMouseOut/>
    </div>
  );
};

export default App;

---

Mouse Over

// react 에서는 onMouseOver 이벤트도 camelCase 형식의 네이밍 형식을
// 사용합니다. onMouseOver 이벤트는 특정 tag 영역 안에 마우스 커서가
// 진입할 때 발생합니다.

 

// MouseOver라는 함수를 선언하고 전달 받은 파라미터를 tag라는
    // 함수의 내부 변수에 넣어 사용합니다.

{/* div 태그 영역에 마우스 커서가 진입할 경우 MouseOver
                함수를 호출합니다. 파라미터로 넘긴 div가
                본소스 로그로 출력됩니다.  */}

{/* input 태그 영역에 마우스 커서가 진입할 경우 MouseOver
                함수를 호출합니다. 파라미터로 넘긴 input이
                본소스 로그로 출력됩니다.  */}

 {/* select 태그 영역에 마우스 커서가 진입할 경우 MouseOver
                함수를 호출합니다. 파라미터로 넘긴 select가
                본소스 로그로 출력됩니다.  */}

마우스오버하면 콘솔창에 태그가 뜬다.

---

ReactSubmit

// react에서는 onSubmit 이벤트도 camelCase 형식의 네이밍을 사용합니다.
// onSubmit 이벤트는 form 태그에 사용합니다. form 태그 안에 있는
// type이 submit인 input 태그를 클릭하거나 input 태그에 커서를 놓고
// Enter키를 누르면 onSubmit 이벤트가 발생합니다.