처음 만난 리액트(React) : section 8. Handing Events

💡 Event의 정의 및 Event 다루기

Event

특정 사건

사건, 특정 사건을 의미

DOM의 Event

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

// 버튼을 누르면 activate 함수 호출
// 클릭 이벤트 처리하는 함수 onclick을 통해서 전달

React의 Event

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

// 카멜 표기법
// DOM에서 Event 처리를 문자열로 전달, React는 함수 그대로 전달

📍 camelCase

• 첫글자는 소문자, 중간에 나오는 새로운 단어의 첫글자는 대문자로 표기

Event Handler

= Event Listener

이벤트가 발생하는 것을 계속 듣고있다는 의미

어떤 사건이 발생하면 사건을 처리하는 역할

// Toggle Class Component

class Toggle extends React.Component {
  constructor(props) {
    	super(props);
    
    	this.state = { isToggleOn: true };
    
    	// callback에서 'this'를 사용하기 위해서는 바인딩을 필수적으로 해줘야 함
		// 바인드하는 이유 : 자바스크립트에서 기본적으로 class 함수들이 바인딩되지 않음 
    	this.handleClick = this.handleClick.bind(this);
  }
  // 일반적인 함수를 정의와 동일, 가로와 중괄호 사용해서 class함수 정의
  // constructor에서 bind를 이용해 this.handleClick에 대입
  handleClick() {
    	this.setState(prevState => ({
          	isToggleOn: !prevState.isToggleOn
        }));
  }
  
  render() {
    return (
      	<button onClick={this.handleClick}>
      		{this.state.isToggleOn ? '켜짐' : '꺼짐'}
		</button>
		);
	}
}
// Component State에는 isToggleOn boolean 변수가 있음
// 버튼 클릭시 Event Handler인 handleClick이 호출

Class fields syntax 사용

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

Arrow function 사용

class MyButton extends React.Component {
  	handleClick() {
      	console.log('this is:', this);
    }
  
  	render() {
      // 이렇게 하면 'this'가 바운드
      return (
        <button onClick={() => this.handleClick()};
  			클릭
  		</button>
		);
	}
}
// MyButton Component가 렌더링될 때마다 다른 callback 함수가 생성되는 문제가 있음
// 이 callback 함수가 하위 컴포넌트 prop으로 넘겨지면 하위컴포넌트가 추가적으로 렌더링이 발생

❕ 성능 문제를 피하기 위해서 bind나 class fields syntax 사용하는 것을 권장

❕ 참고 링크 [자바스크립트 함수의 작동 원리 일부분]
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Golobal_objects/Function/bind

---

함수 컴포넌트 내부에서 Event Handler 정의하는 방법 2가지

function Toggle(props) {
  	const [isToggleOn, setIsToggleOn] = useState(true);
  
  	// 방법 1. 함수 안에 함수로 정의
  	function handleClick() {
      	setIsToggleOn((isToggleOn) => !isToggleOn);
    } 

  	// 방법 2. arrow function을 사용하여 정의
  	const handleClick = () => {
      	setIsToggleOn((isToggleOn) => !isToggleOn);
    }
    
    return (
      <button onClick={handleClick}>
      		{isToggleOn ? "켜짐" : "꺼짐"}
	  </button>
	);
}

Arguments 전달하기

함수에 전달할 데이터

Event Handler에 전달할 데이터

• Parmeter [매개변수]

Arrow function 사용, Bind 사용

// Event란 매개변수는 리액트의 Event 객체
// 첫번째 매개변수는 id, 두번째 매개변수로 Event 전달

// 명식적으로 Event를 두번째 매개변수로 넣어줌
<button onClick={(event) => this.deleteItem(id, event)}>삭제하기</button>

// Event 자동으로 id이후로 두번째 매개변수로 전달
<button onClick={this.deleteItem.bind(this, id)}>삭제하기</button>

Function Component에서 Event Handler에 매개변수 전달

function MyButton(props) {
  	const handleDelete = (id, event) => {
      console.log(id, event.target);
    };
  
  	return (
      	<button onClick={(event) => handleDelete(1, event)}>
      		삭제하기
		</button>
	);
}
// 매개변수 순서는 마음대로