[React] - input 태그

<input>에 입력한 값 가져오는 법

<input onChange={(e)=>{ console.log(e.target.value) }}/>

e - 작명 자유롭게 가능

 

e.target  현재 이벤트가 발생한 곳을 알려주고

e.preventDefault() 이벤트 기본 동작을 막아주고

e.stopPropagation()  이벤트 버블링도 막아줍니다. 이거 쓰면 좋아요버튼 누를 때 모달창도 떠버리는 버그 해결가능

 

사용자가 input에 입력한 데이터 저장하기

const Test = () => {

    let [title, setTitle] = useState('')

    return (
        <div>
            <input onChange={(e) => {
                setTitle(e.target.value)
                console.log(title);
            }}/>
        </div>
    );
}

* 첫 입력한 값이 안뜨는 이유는 state 변경함수 특징 때문,

state 변경함수는 약간 늦게 처리된다. 실행 순서만 다를뿐 state 변경은 잘 된다.