onChange 이벤트 핸들링하기
✔ 코드 설명
onChange={(e) => {
console.log(e);
}}여기서 넘어가는 e객체는 SyntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체이다
-
SyntheticEvent
-
이벤트 발생 시, 이벤트 핸들러는 SyntheticEvent(일반적인 이벤트 객체)의 인스턴스를 전달
-
일반적으로 우리가 사용하는 event 객체는 native event 객체가 아니라 래핑된 이벤트 객체인 Syntheticevent를 사용. 이것은 우리가 흔히 사용하는 stopPropagation 과 preventDefault 를 포함하여 브라우저의 기본 이벤트(nativeEvent)와 동일한 인터페이스를 가지고 있음.
-
native event와 달리 이벤트가 끝나고 나면 트가 초기화되므로 정보를 참조할 수 없음.
➡ 비동기적으로 이벤트 객체를 참조할 일이 있다면 e.persist()함수 호출
onChange={(e) => { console.log(e.target.value); }}
-
➕ state에 input 값 담기
생성자 메서드인 constructor에서 ate 초깃값을 설정, 이벤트 핸들링 함수 내부에서 this.setState 메서드를 호출하여 state를 업데이트는 코드
➕ 버튼을 누를 때 comment 값을 공백으로 설정
앞서 코드에 입력한 값이 state에 잘 들어갔는지 보기 위해 input요소에 button을 하나 만들고, 클릭 이벤트가 발생하면 현재 comment 값을 메시지 박스로 띄운후 comment 값을 공백으로 설정하는 코드
임의 메서드 만들기
앞 장의 주의 사항에서 '이벤트에 실행할 자바 스크립트가 아니라 함수 형태의 값을 전달한다'라고 했는데,
그렇기 때문에 이벤트를 처리할 때 렌더링을 하는 동시에 함수를 만들어서 전달했다
그리고 이런 방법 대신 함수를 미리 준비해서 전달하는 방법도 있음 (바벨의 transform-class-properties 문법을 사용하여 화살표 함수 형태로 메서드를 정의하는 것)
input 여러 개 다루기
event 객체를 활용하여 input 여러개를 처리 한다. 즉, e.target.name값을 사용하면 된다.
onKeyPress 이벤트 핸들링
comment 인풋에서 Enter를 눌렀을 때 handleClick 메서드를 호출하는 코드
함수형 컴포넌트로 구현해 보기
e.target.name와 useState를 활용하여 코드 작성
