[React_study] 사용자가 입력한 글 다루기(input)

* <input>에 입력한 값 가져오기

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

• e 혹은 event라는 파라미터 추가
• e.target.value값을 출력해보면 현재 <input>안에 입력된 값을 가져올 수 있다.

e는 이벤트 객체라는 이름으로 부르는데

현재 발생하는 이벤트와 관련한 유용한 기능들을 제공하는 일종의 변수이다.

(작명은 e 말고 자유롭게 해도 된다.)

 

(참고사항)

• e.target : 현재 이벤트가 발생한 곳
• e.preventDefault() : 이벤트 기본 동작을 막아준다.
• e.stopPropagation() : 이벤트 버블링을 막아준다.

 

* <input>에 뭔가 입력시 코드를 실행하기

• onChange 혹은 onInput 이벤트 핸들러를 이용한다.
• onChange 혹은 onInput은 <input>에 유저가 뭔가 입력을 할 때마다 안에 있는 코드를 실행시킨다.

<input onChange={()=>{ console.log('change code') }}/>

[참고] 이벤트 핸들러 종류 및 사용법

https://ko.reactjs.org/docs/events.html

 

ex) onMouseOver : 마우스를 올렸을 때 코드를 실행

onScroll : 요소를 스크롤 했을 때 안의 코드를 실행

 

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

• 사용자가 input에 입력한 데이터는 state 혹은 변수에 저장해서 사용하는것이 일반적이다.

- 예시 코드

function App (){

  const [inputValue, setInputValue] = useState('');
  return (
    <input onChange={(e)=>{ 
      setInputValue(e.target.value) 
      console.log(inputValue);
    }} />
  )
}

• state가 onChange될  때 마다 state에 e.target.value를 넣는다.

(참고) state 변경함수는 약간 늦게 처리된다.

async하게 (비동기적으로) 처리된다. 그리고 자바스크립트에선 늦게 처리되는 코드들은 잠시 제쳐두고 바로 다음줄을 실행해준다. 그래서 약간 늦게 처리 되지만 state변경은 잘된다.