• 목차

Event-System

1. 직접 이벤트 속성에 이벤트 핸들러 함수 정의하며 이벤트 연결

class EventButton extends React.Component {

/* constructor를 생략하면 아래 구문을 적어준다. */
constructor(props) {
    super(props);
}
render() {
    console.log(this.props);

    return (
        <button onClick={() => alert('인라인 함수 이벤트 동작 확인')}>{this.props.children}</button>
    );
}
ReactDOM.createRoot(document.getElementById('root')).render(
 <EventButton>이벤트버튼</EventButton>
);

→ Class형 컴포넌트라 기본 생성자를 만들어야 한다.

1. render 함수 외부에 이벤트 핸들러 함수 정의 후 함수 전달하여 이벤트 연결

• 클래스 내부의 함수를 호출할 때는 this.를 반드시 붙여줘야 한다.
  • this는 결국 메소드를 지닌 객체를 향한다. 그렇기 때문에 this를 붙이지 않으면 찾지 못함

onClickHandler = () => alert('외부 함수 이벤트 동작 확인');

render() {
    return (
        <button onClick={this.onClickHandler}>{this.props.children}</button>
    );
}

1. component에 이벤트를 props로 전달 후 연결

render() {
    console.log(this.props);
    const { onClick, children } = this.props;
    return <button onClick={onClick}>{children}</button>;
}

/* 컴포넌트 실행 부분*/
<EventButton onClick={() => alert('props로 이벤트 전달 후 연결 확인')}>
    이벤트 버튼
</EventButton>

• props를 사용하여 전달할 props와 그의 children 요소를 객체 형식으로 넘길 수 있음

  • 여기서 컴포넌트 실행 부분에 onClick 이벤트 요소가 아닌 props로 넘기는 Key값으로 사용

  

  • 객체 형식으로 넘긴 후, 구조 분해 할당을 통하여 컴포넌트 구성이 가능하다.

[주의 사항]

1. 이벤트 속성의 이름은 캐멀 표기법으로 작성해야 한다.
   • onclick → onClick, 그 외에는 https://ko.reactjs.org/docs/events.html 참조
2. 이벤트 실행 할 자바스크립트의 코드를 전달하는 것이 아닌 함수 형태의 값을 전달
   • html -> <button onclick="alert('hello world')">클릭</button>
   • react -> <button onClick={() => alert('hello world')}>클릭</button>
3. DOM 요소에만 이벤트를 설정할 수 있다.
   • 컴포넌트에 onClick이라고 해서 전달하면 props 객체에 담기는 값이 될 뿐이다.
   • 하지만 컴포넌트 내부에서 props에 전달되어 온 함수를 이벤트 핸들러로 추가할 수 있다.
     • ex) <button onClick={this.props.onClick}>클릭</button>