Development/React.js

[React] input 상태 관리하기

moretz0921 2022. 1. 4. 00:02

 

 

 

useState를 사용하며, input의 이벤트에 등록하는 함수에서는 이벤트 객체 e를 파라미터로 받아와서 사용할 수 있는데

이 객체의 e.target은 이벤트가 발생한 DOM인 input DOM을 가리키게 된다.

이 DOM의 value 값, 즉, e.target.value를 조회하면 현재 input에 입력한 값이 무엇인지 알 수 있다.

 

이 값을 useState를 통해서 관리해주면 된다. 

 

* input의 상태를 관리할 때에는 input 태그의 value 값도 설정해주는 것이 중요하다. 

그렇게 해야 상태가 바뀌었을 때 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;