이벤트 처리 방법

---

1. 핸들링 함수 선언

const App = () => {
  const handleClick = () => {
    alert("클릭했습니다.");
  }
  return (
    <div>
    	<button onClick={handleClick}>
    	클릭하세요
  		</button>
  	</div>
    )
}

2. 이벤트 내에 익명 함수 작성

const App = () => {
  return (
    <div>
    	<button onClick={() => { alert('클릭했습니다.')}>
    	클릭하세요
  		</button>
  	</div>
    )
}

이벤트 객체

---

DOM Element 의 경우, 핸들링 함수에 이벤트 object를 매개변수로 전달

이벤트 object를 이용하여 이벤트 발생 원인, 이벤트가 일어난 Element에 대한 정보를 얻을 수 있음.

이벤트 형태 (클릭, 키 입력 등)와 DOM 종류 (button, form, input 등)에 따라 전달되는 이벤트 object 내용도 다름

const App = () => {
  const handleChange = (event) => {
    console.log(event.target.value) + "라고 입력하셨네요.");
  }
  return (
    <div>
      <input onChange={handleChange} />
    </div>
    )

많이 쓰이는 DOM 이벤트

---

더 많은 정보는 이 곳 참조

• onClick : Element를 클릭했을 때
• onChange : Element의 내용이 변경되었을 때 (input 텍스트, 파일 선택 등)
• onKeyDown, onKeyUp, onKeyPress : 키보드 입력이 일어났을 때
• onDoubleClick : Element를 더블 클릭했을 때
• onFocus : Element에 Focus 되었을 때
• onBlur : Element가 Focus를 잃었을 때
• onSubmit : Form Element에서 Submit 했을 때

DOM Input 값을 State에 저장하기

const App = () => {
  const [inputValue, setInputValue] = useState("defaultValue");
  
  const handleChange = (e) => {
    setInputValue(event.target.value);
  }
  
  return (
  	<div>
    	<input onChange={handleChange} defaultValue={inputValue} />
    <br />
    입력한 값은 : {inputValue}
    </div>
  )

DOM Input의 여러 값을 동시에 처리하기

function App() {
  const [user, setUser] = useState({ name: "타잔", school: "크래프톤 정글" });

  const handleChange = (e) => {
    const { name, value } = e.target;
    const newUser = { ...user };
    newUser[name] = value;
    setUser(newUser);
  };

  return (
    <div className="App">
      <input name="name" onChange={handleChange} value={user.name} />
      <input name="school" onChange={handleChange} value={user.school} />
      <br />
      <p>
        {user.name}님은 {user.school}에 재학중입니다.
      </p>
    </div>
  );
}

컴포넌트간 이벤트 전달

---

// App.js
import MyForm from "./components/MyForm";

function App() {
  const [username, setUsername] = useState("");
  return (
    <div>
      <h1>{username}님 환영합니다.</h1>
      <MyForm handleChange={(e) => setUsername(e.target.value)} />
    </div>
  );
}

export default App;


// MyForm.js
import React from "react";

const MyForm = ({ handleChange }) => {
  return (
    <div>
      <span>이름 :</span>
      <input onChange={handleChange} />
    </div>
  );
};

export default MyForm;

커스텀 이벤트

---

// App.js
import SOS from "./components/SOS";

function App() {
  return (
      <div>
        <SOS onSOS={() => alert("긴급사태!")} />
      </div>
  );
}

export default App;


// SOS.js
import React, { useState } from "react";

function SOS({ onSOS }) {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount((curr) => curr + 1);

    if (count >= 2) {
      onSOS();
      setCount(0);
    }
  };

  return <button onClick={handleClick}>세 번 누르면 긴급호출 ({count})</button>;
}

export default SOS;