React-Event Handler

onChange 이벤트를 사용해서 input 태그 내에 있는 값을 핸들링해볼 것 이다.
onChange 이벤트는 요소의 무언가가 바뀌었을 때 호출되는 함수이다.
따라서 input 값의 onChange의 event value값을 state로 넘기고,
state에서 Value를 지정하면 수정이 된다

 

import React from "react";
import {useState} from "react";

const Form = () => {
  const [name, setName] = React.useState("");
  return (
    <form>
      <input
        type="text"
        placeholder="First name"
        onChange={(e) => setName(e.target.value)}
        value={name}
      />
    </form>
  );
};

여기서 e는 event가 들어오고 
target.value는 이벤트가 발생된 곳의 Value를 뜻한다.

 

이제 여러개의 인풋을 하나의 State(Object) 로 관리하여 보자

 

import React from "react";
import {useState} from "react";


const Form = () => {
  const [info, setInfo] = React.useState({
    firstName: "",
    lastName: "",
    email: ""
  });

  return (
    <form>
      <input
        type="text"
        name="firstName"
        placeholder="First name"
        onChange={(e) => setInfo({ ...info, firstName: e.target.value })}
        value={info.firstName}
      />
      <input
        type="text"
        name="lastName"
        placeholder="Last name"
        onChange={(e) => setInfo({ ...info, lastName: e.target.value })}
        value={info.lastName}
      />
      <input
        type="text"
        name="email"
        placeholder="Email"
        onChange={(e) => setInfo({ ...info, email: e.target.value })}
        value={info.email}
      />
    </form>
  );
};

이런식으로 다른것은 전개 연산자로, 바꾸는 것은 새로 적어서 바꿔주면 사용할 수 있다.!