input 태그

<input type="text"/>

<input type="range"/>

<input type='date' />

<input type='number' />

<textarea />

<select></select>

<input>에 뭔가 코드를 실행하려면

<input onChange={()=>{ 실행할코드 }}/>

 

• input 태그 안에 입력시 코드를 실행해주기 위할 때
• onInput도 있다.
• console.log로 확인해보면 input 태그 안에 뭔가를 작성할 때 마다 콘솔이 찍힌다.
• onMouseOver={} -> 이 요소에 마우스를 댔을 때 안의 코드 실행
• onScroll={} -> 이 요소를 스크롤했을 때 안의 코드 실행

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

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

• e라는 파라미터 추가
  • e는 이벤트 객체
  • 현재 발생하는 이벤트와 관련한 유용한 기능들을 제공하는 일종의 변수
  • 작명은 e 말고 자유롭게 해도 무방
• e.target.value라고 적으면 현재 <input>에 입력된 값을 가져올 수 있다.
• 위처럼 적으면 콘솔에 실제로 입력된 값 출력
• e.target -> 현재 이벤트가 발생한 곳
• e.preventDefault() -> 이벤트 기본 동작을 막아준다.
• e.stopPropagation() -> 이벤트 버블링을 막아줌. (예를 들어 좋아요 버튼을 누를 때 모달창도 떠버리는 버그 해결 가능)

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

function App (){

  let [입력값, 입력값변경] = useState('');
  return (
    <input onChange={(e)=>{ 
      입력값변경(e.target.value) 
      console.log(입력값)
    }} />
  )
}

• state를 하나 만들어주고 onChange될 때마다 state에 e.target.value 넣으라고 해줌.
• 이제 입력값이라는 state를 필요한 곳에서 마음대로 사용 가능
• state 변경함수는 약간 늦게 처리되는 변경함수 특징이 있다.
  • 비동기적으로 처리되기 때문에.