리액트를 다루는 기술 - REACT EVENT

리액트에서의 이벤트를 사용할 때 주의사항

1. 카멜 표기법으로 사용한다 (onClick={})

2.HTML과 다르게 실행할 자바스크립트코드를 전달하는게 아니라 함수 형태로 값을 전달한다.

3.클래스 컴포넌트에서 this는 함수의 호출부에 따라 무엇을 가리키는지 결정되므로
  클래스의 임의 메서드가 특정 HTML요소의 이밴트로 등록되는 과정에서
  메서드와 this의 관계가 끊어져 버린다.
  this를 컴포넌트 자신으로 제대로 가리키기 위해서는
  메서드를 this와 바인딩하는 작업이 필요하다.
  메서드 바인딩은 생성자(constructor) 메서드에서 하는 것이 정석이다. .bind(this)


4.DOM 요소에만 이벤트를 설정할 수 있다.
컴포넌트에는 이벤트를 설정할 수 없고, 컴포넌트에 onClick과 같은 값을 설정한다면,
어떤 함수를 실행하는 것이 아니라 이름이 onClick인 프롭스를 전달해줄 뿐이다.
따라서 컴포넌트에 자체적으로 이벤트를 설정할 수는 없지만 전달받은 props를
컴포넌트 내부의 DOM 이밴트로 설정할 수는 있다.

React Event는 SyntheticEvent로 발생한다.
SyntheticEvent는 NativeEvent와 달리 이벤트가 끝나고나면 이벤트가 초기화 되므로 정보를 참조할 수 없다.
예를 들어, 0.5초 뒤에 e 객체를 참조하면 e 객체 내부의 모든 값이 비워지게 된다.
만약 비동기적으로 이밴트 객체를 참조할 일이 있다면 e.persist()함수를 호출해야한다.

---

class형 컴포넌트 - constructor/super를 통한 state 생성

1.
class Counter extends Component {
   constructor(props) {
     super(props);
     this.state = {
       number: 0,
       fixedNumber: 0,
     };

2. constructor 없이 state 생성
class Counter extends Component {
	  state = {
    	number: 0,
    	fixedNumber: 0,
  };

클래스형 컴포넌트에서 Property Initializer Syntax를 사용한 메서드 작성.
메서드 바인딩을 constructor로 하는것이 정석이지만 새 메서드를 만들 때마다 constructor도 계속 수정해야한다. 이 작업을 간단하게 하기 위해 바벨의 transform-class-properties문법을 사용하여 화살표 함수 형태로 메서드를 정의하는 것이다.

쉽게 쓰자면, constructor 없애고 일반함수를 화살표 함수로 바꾸는 것.

const func = () => { //statement }

---