앞서 useState를 통해 React를 재호출하여 JSX를 재평가하는 동작에 대해 알아보았다.
이제, state를 활용하기 전, input값을 받아 처리하는 방식에 대해 알아보고자 한다.
사용자 입력 Listening
사용자의 keystroke의 변화에 따라 input값을 수신해보자
const form = () => {
const titleChangeHandler = () => {
console.log('Title Changed!');
};
return (
<label>Title</label>
<input type='text' onChange={titleChangeHandler}
)
}
onChange 이벤트 리스너는 모든 키 입력에 반응하여 수신하고, 모든 키 입력마다 titleChangeHandler 함수를 실행시킨다.
직관적으로 코드를 해석하자면 <label>Title</label>의 형제요소인 input 내 모든 키 입력에 반응하여 titleChagneHandler에 포인터를 전달하는 행위를 실행시킨다.
자, 가상의 입력창에 't'를 입력하고 뒤이어 'e', 's', 't'를 입력해본다고 가정해보자,
그렇다면 console 창에 'Title Changed!'는 몇번 출력될까?
't' 입력에 반응하여 1번 출력
'e' 입력에 반응하여 2번 출력
.
.
.
총 4번이 될 것임을 알 수 있다.
Vanila JS의 중요성
그러나 우리는 사용자가 입력하는 한 글자마다 데이터를 수신하기를 원하는가?
아니다, 최종적으로 사용자가 입력하고자 하는 완전한 데이터를 원한다.
Vanila JS를 잘 이해하고 있다면, 그 해답은 꽤나 명료할 수 있다.
우선 Click Event를 수신하는 예로 살펴보자
document.getElementById('').addEventListener('click', (event) => {console.log(Event)});우리는 addEventListener 메소드의 두 번째 인수로 전달하는 함수에서 자동적으로 어떤 Event가 발생했는지 설명하는 객체를 얻을 수 있다.
이를 React에 응용하여 'titleChangeHandler'를 실행시켜보자
const titleChangeHandler = (event) => {
console.log(event)
}
이 객체는 다양한 데이터를 가지고 있는데, 우리가 주목해야할 데이터는 'target' 데이터이다. 'target' 데이터는 이벤트가 일어나는 DOM 요소를 가리킨다. 특히 target의 수 많은 데이터 중, 우리가 가장 주목할 프로퍼티는 'value' 속성이다.
'value' 속성은 이벤트가 벌어졌을 당시의 현재 입력값을 갖는다.
이를 이용하여 코드를 수정해보자
Event.target.value
const titleChangeHandler = (event) => {
console.log(event.target.value)
}앞서 'target' 데이터의 'value' 속성은 이벤트가 벌어졌을 당시의 현재 입력값을 갖는다 하였다. 이는 곧 우리가 수신하는 요소에 이벤트가 발생하면, 입력된 값을 얻을 수 있음을 암시한다. 콘솔창에 우리가 기대하는 결과값이 출력되는 지 알아보자
예상했던 console 결과값임을 알 수 있다. test를 타이핑하는 모든 keystrok에 반응하여 그 시점의 현재값들을 console에 출력한다.
