React 5일차

이벤트 제어하기

• 함수 안에서 함수를 정의할 수 있다.
• onClick={handleClick}의 {}안에 함수를 정의해도 되고, 밖에서 정의하고 안에 함수 이름을 써줘도 됨

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log("The link was clicked.");
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

Event Pooling

---

Note:

If you want to access the event properties in an asynchronous way, you should call event.persist() on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code.

• 비동기식으로 이벤트 객체의 속성에 접근하기를 원한다면, 당신은 호출해야 한다.
  event.persist()라는 메소드를 호출해야 한다. 합성 이벤트를 pool에서 제거한다.

• await와 await 사이의 코드는 동기식으로 작동한다.

• React에서는 비동기 함수를 이벤트 리스너에 그냥 등록하는 건 위험하다.
• 이벤트 객체는 React에서 쓸 때 조심해야 한다.
• 비동기식으로 이벤트 객체의 속성에 접근하려면, event.persist() 메소드를 호출해야 한다.
• 미리 속성을 빼오면 괜찮다.
• 자세한 방법은 다음에 강사님이 알려주실 예정

React를 사용할 때, (일반적인 경우) 리스너를 추가하기 위해 DOM 요소가 생성된 후
addEventListener 를 호출할 필요가 없습니다.
대신 요소를 처음 렌더링할 때 리스너를 같이 넘겨주세요.

• React가 addEvnetListener를 호출해 주는 것이다.

JSX 콜백에서 this 의 의미에 대해 주의해야합니다.
자바스크립트에서 클래스 메서드는 기본적으로 바인딩 되지 않습니다.
만약 this.handleClick 바인드를 잊은채로 onClick 에 전달하면,
this 는 함수가 실제로 호출될 때 undefined 로 취급됩니다.

이건 React에서만 해당되는 동작이 아닙니다.
자바스크립트의 함수의 동작 방식 자체가 이렇습니다.
일반적으로 onClick={this.handleClick} 처럼 () 없이 메서드를 참조하면,
그 메서드를 bind 해야합니다.

만약 bind 를 호출하는 게 귀찮은 경우,
이 문제를 해결할 수 있는 두 가지 방법이 있습니다.
만약 실험적 기능인 퍼블릭 클래스 필드 문법 을 사용하고 있다면,
콜백을 올바르게 바인딩하기 위해 클래스 필드를 사용할 수 있습니다.

• this와 관련된 문제들이 있고, 여러 가지 해결 방법이 있는데,
  onClick이나 onSubmit, onMouseMouve 등에는 화살표 함수를 사용한다.this가 가리키는 게 잘 고정된다.

• 여러 가지 해결 방법은 각각의 성능 상의 장단점이 있다.

---

• 중요한 내용: React는 특별한 객체를 사용한다.-> 주의해야 할 부분이 있다.
• 특히 이벤트 리스너를 사용할 때, this 때문에 문제가 많이 발생하므로 문제를 해결하기 위해서 화살표 함수를 사용하자.

---