[event] preventDefault(), bind(), onChangePage, shouldComponentUpdate()

> *.preventDefault()

• event(*)의 기본적인 동작 방법을 못하게 할 때 사용

...
<header>
    <h1><a href="/" onClick={function(e) {
        //console.log를 하면 재부팅이 되는데 이런 것을 다음 함수가 막아줍니다.
        console.log(e); 
        e.preventDefault();
    }}
    </h1>
</header>

> bind()

• 함수내의 this를 설정해줍니다.
• 여러개의 인자를 사용할 수 있다.
• bind()의 2번째 3번째 인자는 해당 함수의 첫번째(bind-2번째), 두번째(bind-3번째)로 들어간다.

//obj객체를 test()안으로 주입을 해줍니다.
var obj = {name: 'gpaeng'};

function test(num1, num2) {
    console.log(this.name);
}.bind(obj, 1, 2);
// 1 => num1
// 2 => num2

---

> onChangePage

• Component event만들기
• onChangePage에 함수를 설치하면 event가 발생 되었을 때
• props로 전달된 onChangePage를 호출해서 사용한다

//App.js
class App extends Component {
    ...
    return (
    <div className="App">
        <Subject
            title={this.state.subject.title}
            onChangePage={function(id) {
                this.setState({
                    mode: 'welcome'
                });
            }.bind(this)}
    </div>
    );
}

//Subject.js

class Subject extends Component {
    render(){
        return (
        <header>
            <h1><a href="/" 
            data-id={data[i].id} //dataset에 전달된다. => dataset.id로 사용가능
            onClick={function(e) {
            e.preventDefault();
            this.props.onChangePage(e.target.dataset.id); //id값 넘겨주기
        }.bind(this)}>{this.props.title}</a></h1>
        </header>
        );
    }
}

 

> shouldComponentUpdate()

• Component가 있으면 render()가 실행 되는데 render() 실행여부를 설정하기 위한 함수
• false => render() 실행 X
• true => render() 실행 O

class a extends Component {
    shouldComponentUdate(newProps, newState) {
        //newProps.data => 새롭게 바뀐 값
        //this.props.data => 원래의 값
        // return (false/true) 둘중 하나 
    }
    render() {
        //...
    }
}