React | event (이벤트) 에 대해서

 

---

event (이벤트)

• 카멜 케이스로 작성되며, html 에서 onclick은 React에서 onClick으로 작성한다.
• 핸들러 함수는 컴포넌트 내에서 작성되며, 익명함수로도 작성할 수 있다.
• 익명함수 내에선 this가 아무것도 가리키지 않으므로 bind 함수를 사용하여 this를 지정해준다.

import React, { Component } from 'react';

class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            buttonName = '저장'
        };
    }

    handleClick() {
      console.log(this.state.buttonName, '버튼이 클릭되었습니다.');
    }

    render() {
        return (
            <button onClick={this.handleClick}>클릭</button>
            <button onClick={function() {
                console.log(this.state.buttonName, '버튼이 클릭되었습니다.');
            }.bind(this)}
            >클릭</button>
        );
    }
}

---

컴포넌트 간 이벤트 사용

• 자식 -> 부모 컴포넌트로 데이터를 전달하고자 할때 event를 사용한다.
• props의 속성으로 이벤트를 지정할 수 있고, 하위 컴포넌트에서 이벤트가 실행되도록 할 수 있다.
• 이벤트 익명함수의 첫번째 default 파라미터로 이벤트가 넘어온다.
• bind 함수 this 파라미터 외에 다른 걸 지정하면 default 파라미터인 이벤트는 뒤로 밀려난다.

// 부모 컴포넌트
import React, { Component } from 'react';
import ChildComponent './ChildComponent';

class ParentComponent extends Component {
	constructor(props) {
    	super(props);
        this.state = {
        	title = '';
        }
    }

    render() {
        return (
            <ChildComponent onCustomEvent={function(_title) {
            	this.state.title = _title;
                console.log(_title);
            }.bind(this)}></ChildComponent>
        );
    }
}

// 자식 컴포넌트
import React, { Component } from 'react';

class ChildComponent extends Component {
    constructor() {
        super(props);
        this.state = {
            contents: [
                { id: 1, title: 'HTML' },
                { id: 2, title: 'CSS' },
                { id: 3, title: 'JavaScript' }
            ]
        }
    }
    
    render() {
    	var i = 0;
        var lists = [];
        
        while (i < this.state.contents.length) {
            var content = this.state.contents[i];
            lists.push(
                <li key={content.id}>
                    <a onClick={
                        function(_title, e) {
                            e.preventDefault();
                            this.props.onCustomEvent(_title);
                        }.bind(this, content.title)
                    }>{title}</a>
                </li>
            );
            i = i+1;
        }
        
        return (
            <ul>
                {lists}
            </ul>
        );
    }
}

export default ChildComponent;