[React] Inflearn 처음 만난 리엑트(React) - Handling Event

 

 

 

 

 

 

 

 

 

 

 

 

 

 

React.js

 

 

강의

(Inflearn) 처음 만난 리엑트(React) - SOAPLE님

 

https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard

[무료] 처음 만난 리액트(React) - 인프런 | 강의

 

 

8강. Handling Event

이벤트를 처리하는 것 ( = Event Listener )

 

 

DOM의 Event 

onclick 속성을 통해서 문자열로 전달한다.

<button onclick="activate()">clicked</button>

 

 

React의 Event

onClick 속성을 통해서 함수 자체로 전달한다. (on뒤의 Event 첫 글자를 대문자로 표기한다.)

<button onClick={activate}>clicked</button>

 

 

Event Handler 추가 방법

Class Component

1. 생성자에 Binding해준다.

 

* 자동으로 bind해주는 기능이 없기 때문에 bind를 따로 안해주면

 

Global Function에서 함수를 찾게 되고 undefined가 나오게 된다.

 

예시

class Toggle extends React.Component {
   construtor(props) {
      super(props);
      this.state = {isToggle: true};

      this.handleClick = this.handleClick.bind(this);
   }
   
   handleClick() {
      this.setState(prevState => ({
         isToggleOn: !prevState.isToggleOn
      });
   }
   
   render() {
      return (
         <button onClick={this.handleClick}>{ this.state.isToggleOn ? '켜짐' : '꺼짐' } </button>
      )
   }
   
}

 

2. Class Fields Syntax를 사용한다.

 

예시

class MyButton extends React.Component {
   handleClick = () => {
      console.log('this : ', this);
   }

   render() {
      return (
         <button onClick={this.handleClick}>클릭</button>
      )
   }
}

 

3. onClick 속성 내에서 Arrow Function을 사용하면 된다.

 

예시

class MyButton extends React.Component {
   handleClick() {
      console.log('this : ', this);
   }

   render() {
      return (
         <button onClick={() => this.handleClick()}>클릭</button>
      )
   }
}

 

하지만 3번 방식처럼 속성 내에서 화살표 함수를 사용할 경우,

 

재렌더링될 때마다 새로운 Callback Function이 생성되게 된다.

 

 

해당 함수가 하위 Component에 props로 넘겨지게 된다면

 

하위 Component의 Function도 재렌더링되는 문제가 발생할 수 있다.

 

 

따라서, 성능 이슈를 피하기 위해선 1번이나 2번 방법으로 사용하는 것을 권장한다.

 

 

Function Component

Function Component에서 Event Handler로 Function을 넣어줄 때

 

this를 사용하지 않고 곧 바로 Function을 넣어주면 된다.

 

 

1. Function 안에 또 다른 Function으로 정의해준다.

 

예시

Function Toggle(props) {
   const [ isToggleOn, setIsToggleOn ] = useState(true);

   function handleClick() {
      setIsToggleOn((isToggleOn) => !isToggleOn);
   }
   
   return (
      <button onClick={handleClick}>{isToggleOn ? '켜짐' : '꺼짐' }</button>
   )
}

 

2. Arrow Function을 사용해서 정의한다.

 

예시

Function Toggle(props) {
   const [ isToggleOn, setIsToggleOn ] = useState(true);

   const handleClick = () => {
      setIsToggleOn((isToggleOn) => !isToggleOn);
   }
   
   return (
      <button onClick={handleClick}>{isToggleOn ? '켜짐' : '꺼짐' }</button>
   )
}

 

 

Argument 전달 방법

Argument

Event Handler에 전달할 데이터, 매개 변수 ( = Parameter )

 

Class Component

1. Arrow Function을 사용한다.

<button onClick={(event) => this.deleteItem(id, event)}>삭제하기</button>

 

2. bind를 사용한다.

<button onClick={this.deleteItem.bind(this, id)}>삭제하기</button>

 

 

Function Component

 

예시

function MyButton(props) {
   const handleDelete = (id, event) => {
      console.log(id, event.target);
   };

   return (
      <button onClick={(event) => handleDelete(1, event)}>삭제</button>
   )
}

 

* 매개 변수의 순서는 원하는 대로 변경해도 상관없다.