패스트캠퍼스 챌린지 10일차 - 리액트 이벤트 처리 이해하기

 

이벤트

 

리액트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사하지만 다르다.

 

1. React의 이벤트는 소문자가 아닌 camelCase 명명법을 적용한다. 

2. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다. 

 

   html : <button onclick="activeOn()"> ActiveState </button>

   React : <button onClick={activeOn}> ActiveState </button>

 

3. React에서는 이벤트 핸들러의 return값으로 false를 전달해도 이벤트의 기본 동작을 방지할수 없어,

   반드시 preventDefault를 명시적으로 호출해야한다.

   함수에 전달된 파라미터 e는 합성이벤트이며,

   브라우저마다 조금씩 다른 이벤트 효과를 w3c명세에 따라 정의하여 동일한 이벤트에서 동일한 사용자 경험을 할 수 있도록 해준다.

 

일반적인 이벤트 핸들러 패턴 : 함수로 만들어 사용 ▼

See the Pen Toggle by Dan Abramov (@gaearon) on CodePen.

클래스 컴포넌트 내에서 함수를 정의해도 constructor 내부에서 바인딩 해주지 않으면 인식하지하지 못한다.

이를 방지하기 위해 함수 정의시 화살표 함수로 사용하거나, 이벤트에 주입시 화살표 함수로 주입하여 해결한다.

 

** 화살표 함수를 사용하여 바인딩 해줄 경우 컴포넌트가 리렌더링시 다른 콜백함수가 생성되어,

콜백이 하위 컴포넌트에 props로 전달된다면 매렌더링마다 하위컴포넌트도 리렌더링 된다.

  1.
  handleClick = () => {
    console.log('this is:', this);
  }
  
  2.
  handleClick() {
    console.log('this is:', this);
  }
  
  render() {
    // 이 문법은 `this`가 handleClick 내에서 바인딩되도록 합니다.
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
   }

 

합성이벤트(SyntheticEvent)

 

React의 이벤트 핸들러는 모든 브라우저에서 이벤트를 동일하게 처리하기 위해 이벤트 래퍼 SyntheticEvent 객체를 전달받는다.

모든 브라우저에서 동일하게 동작하지만 브라우저의 고유 이벤트와 동작이 일치하지 않기 때문에,

브라우저의 고유 이벤트가 필요하다면 nativeEvent 속성을 참고해야한다.

 

합성 이벤트 객체가 가지는 속성

React가 지원하는 이벤트들은 이벤트 버블링 단계에서 호출된다.

캡처 단계에서 이벤트 핸들러가 작동하길 원한다면 이벤트 이름 뒤에 Capture를 붙여서 사용하면 된다.

 

** 버블링과 캡처링 알아보기

 

 

 

 

https://bit.ly/3FVdhDa

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

 

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.