[React] input 상태 관리

import React, { useState } from 'react';

const InputTest() => {

  const [text, setText] = useState('');
  const onChange = (e) => { 
    setText(e.target.value);
    // 입력할 때 마다 setText의 값 변경
  };
  const onReset = () => {
    setText('');
    // 값 초기화
  };
  return(
    <div>
      <input placeholder="값을 입력하세요." onChange={onChange} value={text} />
      <!-- 값이 변경될 때 마다 text의 값을 불러옴 -->
      <button onClick={onReset}>초기화</button>
      <!-- 클릭시 값 초기화 -->
      <div> 값 : </div>
    </div>
  )
};

 

 

 

input 여러개일 때

import React, { useState } from 'react';

const InputTest() => {

  const [text, setText] = useState({
    name: '',
    nickname: ''
  });
  
  const { name, nickname } = inputs; 
  // 비구조화 할당으로 값 추출
  
  const onChange = (e) => { 
    const { value, name } = e.target;
    // e.target 에서 name, value 값 추출 
    // 객체 수정 -->
    setInputs({
      ...inputs, // input 객체 복사 
      [name]: value // name 키를 가진 value로 설정 
    });
  };
  
  const onReset = () => {
    setText({
      name: '',
      nickname: '',
    });
  };
  return(
    <div>
      <input placeholder="이름" onChange={onChange} value={name} />
      <input placeholder="닉네임" onChange={onChange} value={nickname} />
      
      <button onClick={onReset}>초기화</button>
      
      <div> 값 : </div>
    </div>
  )
};