input 종류

<input type = "text" />

<input type = "range" />

<input type = "checkbox /">

<input type = "date" />

<select></select>

<textarea></textarea>

onChange

input에 무언가 입력 시 특정코드를 실행하고 싶을 때
onChange / onInput

✔️ 형식
<input onChange = { ()=>{...}}/>

• onClick과 유사
  onClick은 해당 태그를 클릭할 때 마다 발생,
  onChange는 input에 사용자가 무언가 입력할 때 마다 특정코드 실행
• onChange 유사품으로 onInput이 있음(기능동일)

📎 그 외의 이벤트핸들러

• onMousOver
• onScroll

e.target.value

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

• e : 이벤트 객체

• e는 지금 발생하는 이벤트에 관련된 여러 기능을 담고 있음

• ...부분에 console.log(e.target)을 달아주면 이벤트가 발생한 html태그를

• ...부분에 console.log(e.target.value)를 달아주면 이벤트가 발생한 html태그에 입력한 값을 알려줌!

📎 응용) input으로 들어온 값 저장하기

let [입력값, 입력값변경] = useState('');

• input값은 보통 변수나 state에 저장
• 문자가 저장될 것이므로 빈문자열('')을 넣어둠

<input onChange = { (e)=> {
  입력값변경(e.target.value);
  console.log(입력값);
}} />

📎 참고)

• 근데 위 코드를 실행해보면 a를 입력하면 콘솔창에 아무것도 뜨지않고,
  aa를 입력하면 a만 콘솔창에 뜸

• 왜냐면 state 변경함수는 약간 늦게 처리가 됨(비동기처리)
• 그리고 자바스크립트에선 늦게 처리되는 코드들은 잠깐 제쳐두고 바로 다음줄을 출력하려고 하기 때문에 console.log가 먼저 실행된다.

💡 이벤트버블링

상위 html로 퍼지는 현상을 이벤트 버블링이라고 한다.

<div>
  <h4 onClick ...>글제목
  	<span>따봉</span>
  </h4>
</div>

• h4태그 뒤에 ...부분에 글제목을 클릭하면 modal창을 띄워 달라고 코드를 짰는데 span태그의 '따봉'만 눌러도 모달창이 켜짐..
  → 이벤트 버블링 때문
• 이땐 이벤트 객체를 써서 이벤트버블링 현상을 막아줄 수 있음

<span onClick={ (e)=>{
  e.stopPropagation();
  따봉변경(따봉+1) 
}} >"따봉"</span>

• 이렇게 span태그에 e.stopPropagation()을 넣어주면 이제 따봉을 눌러도 모달창이 켜지는 오류(이벤트버블링)이 없어짐