이벤트

HTML에서 에벤트를 설정할 때는 큰따옴표 안에 실행할 코드를 넣었지만, 리액트에서는 함수 형태의 객체를 전달합니다.

DOM 요소 (div, button, input, form, span) 에는 이벤트를 설정할 수 있지만, 컴포넌트에는 이벤트를 설정할 수 없습니다. (컴포넌트에서 이벤트를 걸면 props 으로 인식하기 때문입니다.)

리액트에서 넘어오는 e 객체는 SyntheticEvent 로 웹 브라우저의 네이티브 이벤트를 감싸는 객체입니다. SyntheticEvent는 네이티브 이벤트와 달리 이벤트가 끝나고 나면 이벤트가 초기화 되므로 정보를 참조할 수 없습니다. -> 또 사용하려면 다른곳으로 복사해두고 사용해야할것 같습니다.

클래스형 컴포넌트

에서 이벤트를 다뤄봤습니다.
메모
1. this 와 화살표 함수 를 가능하게 해주는 바벨의 transform-class-properties
2. 클래스형 컴포넌트에서 input이 여러개면 e.target.name 으로 상태 키값을 설정해줍니다.(class 상태는 키:값 형태이니 가능합니다.)
3. 객체 안에서 key를 [] 로 감사면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key 값으로 사용됩니다.

함수형 컴포넌트

클래스형 컴포넌트를 함수형으로 바꿔봤습니다.
다시 보니깐 e 를 핸들러에서 받지만 컴포넌트 요소에서는 event객체를 넘기지 않습니다.
입력이 많다면 하나의 객체로 상태를 유지하고, [e.target.name] 과 ...스프레드 연산자로 덮어 씌우면 됩니다.
특별한건 없습니다. 책 137을 한번 스윽 보면 될것 같습니다.

위에 내용은 이해는 쉬웠지만, 익숙하게 사용하려면 시간이 필요할것 같습니다.