[React] input 상태 관리하기

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}></input>
            <button onClick={onReset}>초기화</button>
            <div>
                <b>값: </b>
                {text}
            </div>
        </div>
    );
}

export default InputSample;

onChange라는 함수 만들고 e.target하면 이벤트가 발생한 DOM이 들어옴.

해서 value에 text해 주는것이 중요하다. 안그러면 초기화가 되지 않는다 ㅠㅠ