리액트 교과서 - React에서 이벤트 다루기

kyusung·2018년 11월 8일
1

React에서 이벤트 다루기

React에서 DOM 이벤트 다루기

  • function vs. Arrow Function

예제 코드

  • this가 가지는 값

    • function 스코프 내에서 this는 해당 function을 호출한 객체를 this로 한다.
    • 화살표 함수 스코프 내에서 this는 정적(Lexical)영역의 상위 객체를 this로 한다.
  • window가 아닌 undefined가 나오는 이유

    • React는 development 모드에서는 strict mode를 검사하고, production build 에서는 포함되지 않는다.

      Strict Mode

  • 화살표 함수를 사용하면 bind 함수로 바인딩이 필요하지 않다.

    • 화살표 함수 스코프에서 this는 사용된 곳의 상위 객체를 this로 사용하기 때문에 this는 선언된 해당 객체를 가리킨다.

      Arrow Function

  • React가 권장하는 이벤트 바인딩 방법

Handling Events
The best way to bind event handlers in React

super() vs super(props)

생성자에서 this를 사용하기 위해서 super(props)를 사용한다.

What's the difference between “super()” and “super(props)” in React

컴퍼넌트 간의 데이터 교환

예제 코드

React가 지원하지 않는 DOM 이벤트 처리하기

예제 코드

React를 다른 라이브러리와 통합하기: jQuery UI 이벤트

https://www.youtube.com/watch?v=AMMetkCvztg

0개의 댓글