사용법

• 캐멀 케이스(camelCase)로 이벤트를 적어야 한다.
• JSX를 사용하여 함수로 이벤트 핸들러에 전달한다.

onClick event

onClick이벤트는 해당 이벤트를 가지고 있는 input값이 클릭 되었을 때 {}안에 있는 함수를 호출한다.(예시는 위에 있어요~)

onChange event

이벤트에 등록하는 함수에서는 이벤트 e객체를 파라미터로 받아와 사용한다.

e.target 은 이벤트가 발생한 DOM인 input DOM을 가르킨다. e.target.value 를 조회하면 input값을 접근할 수 있다.

import React, { useState } from "react";

export default function App() {
  const [Text, setText] = useState();
  const onChange = (e) => {
    setText(e.target.value);
  };
  return (
    <>
      <input type="text" onChange={onChange} placeholder="입력" />
      <h1>{Text}</h1>
    </>
  );

여러개 input상태 관리

import React, { useState } from "react";

export default function App() {
  const [user, setUser] = useState({ fname: "초", lname: "기", email: "화" });
  function onChange(e) {
    setUser((prev) => { // 이전에 있던 user값을 다가지고 옴
      return {
        ...prev,
        [e.target.name]: e.target.value
      };
    });
  }
  return (
    <div className="App">
      <form>
        <input
          type="text"
          placeholder="이름"
          onChange={onChange}
          name="fname"
        />
        <input type="text" placeholder="성" onChange={onChange} name="lname" />
        <input
          type="text"
          placeholder="email"
          onChange={onChange}
          name="email"
        />
        <h1>{user.fname}</h1>
        <h1>{user.lname}</h1>
        <h1>{user.email}</h1>
      </form>
    </div>
  );
}

input type=’text’를 3개를 주고 각자 name을 준다. 서로 같은 함수인 onChange를 부르고

prev 에 값을 가지고 와서 name이 같은 값에 value를 바꾼다.