🔮 React - 5. 이벤트 핸들링

• 리액트에서 이벤트 핸들링은 HTML과 '비슷'하게 처리됩니다.
• 이벤트 핸들러는 JSX 요소의 props로 전달되며, 함수 형태로 작성 됩니다.
  • 이벤트 핸들러 함수 정의
  • 이벤트 핸들러 함수를 이벤트에 연결
  • 이벤트 핸들러 함수에서 상태 업데이트

import React, {useState} from "react";

const EventHandler = () => {
  const [message,setMessage] = useState("안녕하세요."); // 값이 아닌 주소를 가지고 상태가 변했는지 판단함.
  const changeMessage= (e) => {
    setMessage(e.target.value);
  }
  return (
    <>
      <h1>이벤트 연습</h1>
      <input type="text" name="message" placeholder="자유롭게 입력하세요." onChange={changeMessage}/>
      <h2>입력 받은 메시지 : {message}</h2>
    </>
  );
}

export default EventHandler;

⛔️ 이벤트를 사용할 때 주의사항

1. 이벤트 이름은 Camel 표기법으로 작성 합니다.
   👉 예) HTML의 onclick은 리액트에서는 onClick으로 작성해야 합니다.
2. 이벤트에 실행할 자바스크립트 코드를 작성하는 것이 아니라, 함수 형태의 값을 전달 합니다.
   👉 HTML에서 이벤트를 설정할 때는 큰따옴표 안에 실행할 코드를 넣엇지만.. 리액트에서는 함수 형태의 객체를 만들어 전달 합니다.
   👉 화살표 함수 문법으로 함수를 만들어도 되고, 렌더링 외부에 함수를 만들어 전달해도 됩니다.
3. DOM 요소에만 이벤트를 설정할 수 있습니다.
   👉 div, button, input, form, span 등의 DOM 요소에는 이벤트를 설정할 수 있지만, 사용자가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없습니다.
4. 함수는 함수명만 선언해줍니다.

예시.  HTML

<button onclick="activateLasers()">
  Activate Lasers
</button>f

예시. React

<button onClick={activateLasers}>
  Activate Lasers
</button>

---

OnChange

import React, {useState} from "react";

const EventHandler = () => {
  const [userName, setUserName] = useState("");
  const [message, setMessage] = useState("");
  const onChangeUserName = e => setUserName(e.target.value);
  const onChangeMessage = e => setMessage(e.target.value);
  const onClick = () => {
    alert(userName + " : " + message);
    // input 창을 지우기 위해 빈 값 지정.. -> 비워진 후 렌더링
    setUserName("");
    setMessage("");
  }
  
  const onKeyPress = e => {
    if(e.key === "Enter") onClick();
  }

  return (
    <>
      <h1>이벤트 연습</h1>
      <input type="text" name="userName" placeholder="사용자 이름" value={userName} 
       onChange={onChangeUserName}/>
      <input type="text" name="message" placeholder="메시지 내용" value={message} 
       onChange={onChangeMessage} onKeyDown={onKeyPress}/>
      <button onClick={onClick}>확인</button>
    </>
  );
}

export default EventHandler;

SelectBox

import React, {useState} from "react";

// Select 콤보 박스 사용하기
const FruitSelect = () => {
  const [value, setValue] = useState("🍇");
  
  const handleChange = e => setValue(e.target.value);
  const handleSubmit = e => {
    alert("선택한 과일 : " + value);
    e.preventDefault(); // ✨ 창이 새로고침 되는 것을 막음.
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        과일을 선택하세요.🩷 <br />
        <select value={value} onChange={handleChange}>
          <option value="apple">🍎</option>
          <option value="orange">🍊</option>
          <option value="banana">🍌</option>
          <option value="kiwi">🥝</option>
          <option value="blueberry">🫐</option>
          <option value="grape">🍇</option>
        </select>
      </label>
      <button type="submit">제출</button>
    </form>
  );
}

export default FruitSelect;

RadioBox

import React, {useState} from "react";

const RadioButton = () => {
  const [value, setValue] = useState("");

  const handleChange = e => setValue(e.target.value);

  return (
    <div>
      <input type="radio" name="fruits" value="🍎" onChange={handleChange} />
      <label>🍎</label>
      <br />
      <input type="radio" name="fruits" value="🍊" onChange={handleChange} />
      <label>🍊</label>
      <br />
      <input type="radio" name="fruits" value="🍌" onChange={handleChange} />
      <label>🍌</label>
      <br />
      <input type="radio" name="fruits" value="🥝" onChange={handleChange} />
      <label>🥝</label>
      <br />
      <p>선택한 과일은 [{value}] 입니다.</p>
    </div>
  );
}

export default RadioButton;

---

Table(표) - 기본

import React from "react";
import './App.css';

// ✨ 배열로 구성된 객체를 전달받아 map으로 화면에 표시하고, 표시된 화면 영역에 이벤트 연결하기
const TableMap = () => {
  const data = [
    {id: 100, name: "Elon", age: 38},
    {id: 200, name: "Skat", age: 25},
    {id: 300, name: "Braven", age: 15}
  ];
  const tableClickEvent = (item) => {
    console.log(item); // 눌렀을 때 특정 페이지(메뉴)로 넘어가는 방법은 '라우터' 할 때 배울 예정
  }
  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>이름</th>
          <th>나이</th>
        </tr>
      </thead>
      <tbody>
        {
          data.map(item => (
            // ✨ map은 key값 기준으로 내부를 돌기 때문에 반드시 유일한 id값을 넣어줘야 함.
            <tr key={item.id} onClick={()=>tableClickEvent(item)}>
              <td>{item.id}</td>
              <td>{item.name}</td>
              <td>{item.age}</td>
            </tr>
          ))
        }
      </tbody>
    </table>
  );
}

export default TableMap;

Table(표) - 실제 화면에 그려지는 형태로 변경

import { useState, useEffect} from "react";
import "./App.css";

// 배열로 구성된 객체를 전달받아 map으로 화면에 표시하고, 표시된 화면 영역에 이벤트 연결하기
const TableMap = () => {
    const data = [
        {id : 100, name : "카즈하", age : 21},
        {id : 200, name : "유나", age : 21},
        {id : 300, name : "안유진", age : 21}
    ];
    const [mapData, setMapData] = useState("");
    
    useEffect(() => {    
        setMapData(data);
    },[]);

    const tableClickEvent = (item) => {
        console.log(item);
    }

    return(
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>이름</th>
                    <th>나이</th>
                </tr>
            </thead>
            <tbody>
                {mapData && mapData.map(item => (
                    <tr key={item.id} onClick={()=>tableClickEvent(item)}>
                        <td>{item.id}</td>
                        <td>{item.name}</td>
                        <td>{item.age}</td>
                    </tr>
                ))}
            </tbody>
        </table>
    );
}
export default TableMap;