input
유저의 입력을 받을 수 있는 박스를 생성하고 싶으면 html에선 <input>, <textarea>, <select> 등이 사용가능함
<input></input> //input태그. type으로 text, range, date 등 여러가지가 있음
<textarea></textarea> //큰 input 박스
<select></select> //드롭다운 인풋
html에선 <input>을 써도 잘 실행되지만 React에선 <input>으로 태그를 열면 </input>로 꼭 닫아주어야 함
그래서 <input></input>으로 쓰거나 <input/>으로 써주어야 함
input 입력시 코드 실행
유저가 <input>에 뭔가 입력시 코드를 실행해주고 싶을 때 onChange 아니면 onInput 이벤트핸들러를 부착하면 됨
<input onChange={()=>{ 실행할코드 }}/>
onChange, onInput은 input에 유저가 뭔가 입력(타이핑)할 때마다 안에 있는 코드를 실행해줌
이것말구도 onMouseOver(요소에 마우스를 댔을 때), onScroll(요소를 스크롤 했을 때) 등
이벤트 핸들러는 매우 다양하고 많으니 자신이 원하는 조건에 맞춰 이벤트 핸들러를 부착하면 됨
input에 입력한 값 가져오기
<input onChange={(e)=>{ console.log(e.target.value) }}/>
e라는 파라미터를 추가해주고 e.target.value라고 적으면 현재 input에 입력된 값을 가져올 수 있음
이벤트핸들러에 들어가는 함수에 저렇게 파라미터 e(이벤트 객체, 현재 발생하는 이벤트와 관련한 유용한 기능들을 제공하는 일종의 변수, e말구 다른 작명을 해도 됨)를 추가하면
e.target 이러면 현재 이벤트가 발생한 곳을 알려주고
e.preventDefault() 이러면 이벤트 기본 동작을 막아주고
e.stopPropagation()을 하면 이벤트 버블링 막아줌
- 이벤트 버블링이란 상위 Html로 이벤트가 퍼지는 것을 말함
예를 들어 div아래 h4아래 span태그가 있다고 가정하면
span태그에 onClick 이벤트가 있어 실행하면 span뿐만 아니라 h4와 div도 같이 클릭되어 총 3번 클릭한것으로 됨
사용자가 input에 입력한 데이터 저장
사용자가 input에 입력한 데이터는 state 아니면 변수에 저장해서 쓰는게 일반적
function App (){
let [입력값, 입력값변경] = useState('');
return (
<input onChange={(e)=>{
입력값변경(e.target.value)
console.log(입력값)
}} />
)
}
''는 state에 문자를 저장하고 싶은데 넣을것이 없는 것. 빈문자를 뜻함
댓글