[React] - input

<Input> : 웹 페이지에서 사용자로부터 정보를 입력받기 위해 사용되는 HTML 태그

• 가장 중요한 속성 중 하나로, 어떤 종류의 입력을 받을지를 지정함

❗️ 사용자가 입력하는 input은 주요 데이터이기 때문에 주로 state에 저장해 사용함

❗️ 주요 입력 타입

<input type="text" name="username" /> // 텍스트 입력받음
<input type="password" name="password" /> // 비밀번호 입력받음 (텍스트가 가려짐)
<input type="checkbox" name="subscribe" /> // 체크박스를 생성하여 사용자로부터 여러 옵션 중에서 선택을 받을 수 있음
<input type="radio" name="gender" value="male" /> // 라디오 버튼을 생성하여 사용자로부터 여러 옵션 중에서 하나만 선택을 받을 수 있음
<input type="radio" name="gender" value="female" />
<input type="file" name="file" /> //  파일 업로드를 위한 입력을 생성

<input>에 이벤트 주기

• input 태그에 무언가를 입력했을 때 코드를 실행시키려면 onChange or onInput 이벤트 핸들러를 부착한다!
• onChange, onInput 외에도 onMouseover={}(마우스를 댔을 때 실행), onScroll={}(스크롤 했을 때 실행) 등이 있다.

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

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

• 이벤트 핸들러에 들어가는 함수에 파라미터 e를 추가한다 (e는 이벤트 객체로, 현재 발생하는 이벤트와 관련된 유용한 기능들을 제공하는 일종의 변수이다, 작명은 e말고 다른 이름도 가능)

<input onChange={(e)=>{ console.log(e.target.value) }}/>
// e.target = 현재 이벤트가 동작하고 있는 html 요소, 즉 input
// e.target.value = input에 입력한 값

+)
e.preventDefault() : 이벤트 기본 동작 막아줌
e.stopProgagation() : 이벤트 버블링 막아줌

사용자가 Input에 입력한 데이터 저장하기

function App(){
	let [title, setTitle] = useState(''); // state 생성
  	return (
    	<input onChange = {(e)=>{ // onChange 될 때마다 state에 e.target.value 넣어라
    		setTitle(e.target.value)
      		console.log(title);
    	}}>
    )
}

-> 위 코드를 실행하고 a를 입력하면 콘솔창에 아무것도 뜨지 않음, 왜냐하면 state 변경 함수는 약간씩 늦게 처리되기 때문! (async, 비동기적)