[REACT] input상태 관리하기, input값 나타내고 초기화하기

input 상태 관리하기

이렇게 input에다가 값을 넣으면 밑에 바로 값이 뜨고

초기화를 누르면 input안에 있는 값이 없어지도록 해보자

 

 

---

 

InputSample.js

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;

 

 

먼저 초기값을 설정해준다.

onChange라는 함수를 만든다.

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

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

 

 

버튼에 onClick처럼 input에는 onChange가 있는데

input값에 변화가있을때 마다 아까만들었던 onChange를 실행해준다.

여기서 value값도 꼭 설정해주어야한다.

 

왜냐하면 초기화 버튼을 눌렀을때 value값이 없어지게 관리하기 위해서

value값을 text로 지정하고

onReset을 눌렀을때 text를 ''로 바꿔주기 위해서 이다.

 

 

 

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