코딩애플 리엑트 강의 듣고 혼자서 기록하는 것 입니다.
강의 내용 출처는
https://codingapple.com/course/react-basic/
모든 저작권은 코딩애플에게 있습니다.
input : 사용자가 입력한 글 다루기
JS문법이랑 처리하는 방법은 똑같은데
<input type="text"/>
<input type="range"/>
<input type="date"/>
<input type="number"/>
<textarea></textarea>
<select></select>이렇게 다양한 종류의 인풋 박스가 있다.
(암기하지 말고 필요한건 검색해서 쓰기)
input에 입력시 코드 실행 방법
onChange 또는 onInput 이벤트핸들러를 부착하면 된다.
<input onChange={()=>{ 실행할코드 }}/>onChange, onInput은 input에 유저가 뭔가 입력할때마다 코드를 실행시켜준다
참고) 다른 이벤트 핸들러도 많이있다..!
다양한 이벤트 핸들러가 존재하는데
onMouseOver={ } 는 이 요소에 마우스를 올리면 실행된다.
이 외에도 다른 이벤트핸들러들 많으니 필요하면 검색해서 사용하도록 하자
input에 입력한 값 가져오기
<input onChange={(e)=>{ console.log(e.target.value) }}/>e라는 파라미터를 추가해주고 e.target.value
라고 적어주면 현재 input창에 입력된 값을 가져올 수 있다.
이벤트 핸들러에 들어가는 함수에 저렇게 파라미터 e를 추가하면
e는 이벤트 객체 이런식으로 불리는데 현재 발생하는
이벤트와 관련한 유용한 기능을 제공하는 일종의 변수이다.
e.target : 현재 이벤트가 발생한 곳을 알려준다.
e.preventDefault() : 이벤트 기본 동작을 막아준다.
e.stopPropagation() : 이벤트 버블링을 막아준다.
사용자가 input에 입력한 데이터 저장하기
입력한 데이터를 보통 state 아니면 변수에 저장하고 사용하는 것이 일반적이다.
state에 저장)
function App (){
let [입력값, 입력값변경] = useState('');
return (
<input onChange={(e)=>{
입력값변경(e.target.value)
console.log(입력값)
}} />
)
}입력값이라는 state를 하나 만들고
onChange 될 때마다 state에 value를 넣어준다.
그리고 잘 넣어졌는지 console.log로 확인해본다.
빈 state를 만들고싶으면 ' ' 이렇게 Null 입력해주면 된다.
참고)
위 코드를 실행해보면 a를 입력하면 아무것도 없고 aa를 입력해야 a가 나온다.
이는 state변경 함수의 특징 때문인데
state변경함수는 약간 늦게 처리된다. = async하게 (비동기적으로) 처리된다.
그냥 실행 순서만 조금 다를 뿐 잘 작동하는 것이다.
