---

<input> 상태관리

name 속성

• name 속성을 이용해서 <input> 을 구분 가능.

<input name='id' />

// onChange 등으로 name 값을 받아올 때는,
console.log(e.target.name); // "id" 출력

type

• type='text', type='password' 등 속성 사용 가능.

<input name='id' type='text' />

placeholder

• 입력전 문자 표시.

<input name='id' type='text' placeholder='아이디' />

사용 예시

• 로그인 창 예시,

import React, { useState } from 'react';

function InputSample() {
  const [inputs, setInputs] = useState({
    id: '',
    password: '',
  });
  // input의 값을 이용하기 위한 구조분해.
  const { id, password } = inputs;
  // input에 변화가 생길 때, state 배열 값 변경.
  function valChange(e) {
    const { name, value } = e.target;
    console.log(e.target.name);
    setInputs({
      ...inputs,
      [name]: value,
    });
  }
  // 초기화 함수
  function onReset() {
    setInputs({
      id: '',
      password: '',
    });
  }
  return (
    <>
      <input name='id' type='text' placeholder='아이디' onChange={valChange} value={id} />
      <input name='password' type='password' placeholder='비밀번호' onChange={valChange} value={password} />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {id} ({password})
      </div>
    </>
  );
}

export default InputSample;

---