React 시작하기 6. Multiple Input State

 

App.js

import React from 'react';
import InputSample from '../src/InputSample';

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

export default App;

 

InputSample.js

import React, { useState } from "react";

function InputSample() {
  // {name, nickname} 객체로 초기화, 초기화는 ''로...
  const [inputs, SetInputs] = useState({
    name: '',
    nickname: ''
  });

  // 비구조화 할당을 통해 값 추출
  const { name, nickname } = inputs;

  // 이벤트(e)로 해당 target의 value 불러오기
  const onChange = (e) => {
    // 우선 e.target 에서 name 과 value 값을 추출
    const { value, name } = e.target;

    SetInputs({
      ...inputs,      // 기존 input 객체 복사
      [name]: value   // name 키를 가진 값을 value로 설정
    })
  };

  // Setter 함수로 값 초기화
  const onReset = () => {
    SetInputs({
      name: '',
      nickname: ''
    })
  };

  return (
    <div>
      <input name="name" onChange={onChange} value={name} placeholder="이름"/>
      <input name="nickname" onChange={onChange} value={nickname} placeholder="닉네임"/>
      {/* onClick으로 Reset 함수 호출 */}
      <button onClick={onReset}>Reset</button>
      <div>
        <b>값 : </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;