[TIL]21.05.15

e.preventDefalut();

이런식으로 사용하게 해주면 태그의 기본적인 동작방법을 금지시키는 것이다. 예를 들어 <a>태그를 사용할때 <a href="/">{alert(‘Hello World’)}</a> 이런 alert함수가 들어가서 만약 alert함수가 실행되고 끝날때에 href속성에 의해 페이지가 다시 리로딩된다. 그걸 방지하고자 preventDefalut()을 사용한다. (또 다른 목적이 기억나면 다시 블로깅하겠다...)

  // 컴포넌트를 사용할때에 props로 함수를 받고, 그 함수를 컴포넌트 내부로직에 있는 
  // onClick과 onChange와 같은 이벤트함수 안에 넣어주면 이벤트가 실행될 때
  // 다음과 같이 props로 받은 함수도 같이 실행되어 이벤트를 만든 것처럼 구현할 수 있다.
 <Subject
			title={this.state.subject.title},
			sub={this.state.subject.sub}
			onChangePage = function(){
				this.setState(mode: ‘welcome’);
			}.bind(this);
>```	
   
```js    

import React, { Component } from ‘react’;
class Subject extends Component {
	render(){
		return{
			<header>
				<h1><a href=“/” onClick={function(e){
					e.preventDefault();
					this.props.onChangePage();
				}.bind(this)}>{this.props.title}</a></h1>
				{this.props.sub};
		}
	}
}
export default Subject;

저 위에서 onChangePage라는 이벤트는 자신이 임의로 만든것이다. 즉 이걸로 이벤트를 직접 만들어서 자신이 원하는 이벤트를 만들 수 있다는 것을 알게 되었다.

정확히 얘기하면 props.함수 이런 식으로 만들어서 컴포넌트 안의 태그에 이벤트속성을 넣은 곳에 함수를 다시 속성값으로 넣어서 그 함수속성값에 this.props.onChangePage 이렇게 props가 가지고 있는 함수를 넣어줌으로써 원래 있는 onClick이라는 이벤트를 실행했을때 함수가 실행되므로써 이벤트가 실행되는 것처럼 구현한 것이다.