InputSample

app.js

import React from "react";
import Hello from "./Hello.js";
import "./App.css";
import Wrapper from "./Wrapper.js";
import Counter from "./Counter.js";
import InputSample from "./InputSample.js";

function App() {
  return <InputSample />;
}
export default App;

InputSample.js

import React, { useState } from "react";

function InputSample() {
  const [inputs, setInputs] = useState({
    name: "",
    nickname: ""
  });
  const { name, nickname } = inputs;
  const onChange = e => {
    const { name, value } = e.target;
    //객체 상태를 업데이트 할때에는 객체를 복사하고 나서 덮어씌우고 업데이트 해줘야 한다.

    setInputs({
      ...inputs,
      [name]: value
    });
  };

  const onReset = () => {
    setInputs({
      name: "",
      nickname: ""
    });
  };
  return (
    <div>
      <input name="name" onChange={onChange} placeholder="이름" value={name} />
      <input
        name="nickname"
        placeholder="닉네임"
        onChange={onChange}
        value={nickname}
      />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: 닉네임</b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;