[React] <input /> 태그

 

 

1. 입력을 받을 수 있는 박스 생성 방법들

<input type="text"/>
<input type="range"/>
<input type="date"/>
<input type="number"/>
<textarea></textarea>
<select></select>

< input type = "text" />

< input type = "range" />

< input type = "date" />

< input type = "number" />

<input type="checkbox"/>

<textarea> </textarea>

<select> </select>

 

 

2. <input/>에 입력 시 코드 실행하기

onChange/onInput 등 이벤트 핸들러 사용(필요 시 검색)

 

 

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

이벤트 핸들러에 들어가는 함수에 파라미터 e 추가하기

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

 

e는 이벤트 객체, 현재 발생하는 이벤트와 관련한 기능을 제공하는 일종의 변수(e라는 이름 사용안해도 됨)

이벤트가 발생한 html 태그: e.target
<input onChange={(e) => {console.log(e.target)}} />

이벤트에 발생한 html 태그에 입력한 값: e.target.value
<input onChange={(e) => {console.log(e.target.value)}} />

이벤트 버블링 막기: e.stopPropagation()
<input onChange={(e) => {console.log(e.target.value)}} />

 

이벤트 버블링: 클릭 이벤트 시 상위 html로 퍼지는 현상

 

 

4. <input>에 입력한 값 저장하기

보통 변수/state에 e.target.value를 저장해둠

function App (){

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

 

cf) state 변경함수는 약간 늦게  처리됨 -> async(비동기적처리)