React.js | 입문 | input 상태 관리

전체 코드

import React, { useState } from 'react';

function InputSample() {
  const [text, setText] = useState('');

  const onChange = (e) => {
    setText(e.target.value);
  };

  const onReset = () => {
    setText('');
  };

  return (
    <div>
      <input onChange={onChange} value={text}  />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: {text}</b>
      </div>
    </div>
  );
}

export default InputSample;

 

먼저 useState로 상태 객체를 만들고, input onChange부분에 미리 선언한 함수를 넣어서 

값이 입력될 때마다 State가 바뀌도록 한다.

 

set을 사용할 때 여러가지의 변수가 바뀌어야 할 경우에는

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

이런 식으로 기존 객체를 복사하고, key값에 따라 value값이 바뀌도록 한다.

 

참조

https://react.vlpt.us/basic/08-manage-input.html