[React] Event

Before you learn

● JavaScript Event

---

Event

React에서 이벤트는 camelCase(카멜 케이스)를 사용합니다. (ex : onChange, onClick)

JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(이벤트 핸들러) 자체를 전달합니다.

<button onClick={handleEvent}>Event</button>

 

onChange

// example
import React, { useState } from "react";

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <h1>{name}</h1>
    </div>
  )
};

반응형

---

onClick

// example
import React, { useState } from "react";

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);      // event.target은 이벤트를 발생시킨 객체(요소)를 말한다.
  }                               // 여기서는 input을 말한다.
                                  // 그러므로 e.target.value === input.value이다.
  const handleClick = () => {
    alert(name);
  }
  
  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <button onClick={handleClick}>Button</button>
      <h1>{name}</h1>
    </div>
  );
};

// example
import React, { useState } from "react";

export default function App() {
  const [username, setUsername] = useState("");
  const [msg, setMsg] = useState("");

  return (
    <div className="App">
      <div>{username}</div>
      <input
        type="text"
        value={username}
        onChange={(event) => setUsername(event.target.value)}
        placeholder="여기는 인풋입니다."
        className="tweetForm__input--username"
      ></input>
      <div>{msg}</div>
      
      <textarea
        placeholder="여기는 텍스트 영역입니다."
        className="tweetForm__input--message"
        onChange={(event) => {
          setMsg(event.target.value);
        }}
        value={msg}
      ></textarea>
    </div>
  );
}

---

 

 

React Event를 알아보는 시간이었습니다.

틀린 내용은 댓글로 알려주시면 감사하겠습니다.