생활코딩 react (17.1. 컴포넌트 이벤트 만들기)

# React-17.1. 컴포넌트 이벤트 만들기

 - 17.1 : 사용자 이벤트를 추가하여 App에서 선언한 이벤트를 Subject에서 호출하면, Article에 Subject의 내용 표시

 

* 앞서 App.js에서 임시로 작성한 subject의 동작을 이벤트를 이용하여 subject에서 처리되도록 이벤트 만들기

 - subject의 title인 'WEB'을 클릭했을 때, 이벤트를 만들어서 처리하자.

1.1 App.js에서 호출하는 Subject 테그의 속성(props)으로 이벤트를 선언한다.

:src\App.js return의 Subject props에 사용자 이벤트 추가
onChangePage={function(){
  alert('hello');
}.bind(this)}

1.2 Subject.js에서 render로 호출하는 title 의 링크 속성에 앞서 선언한 이벤트를 호출한다.

 - this.props.onChangePage();

:src\components\Subject.js return의 a테그 속성에서 이벤트 사용
onClick={function(e){
  e.preventDefault();
  this.props.onChangePage();
}.bind(this)}

1.3 생성한 이벤트:onChangePage() 에서 모드를 수정하여 Article의 내용이 변경되는지 확인

:src\App.js return의 Subject props에 추가한 이벤트 수정
onChangePage={function(){
  this.setState({mode:'welcome'});
}.bind(this)}

 

(정리)
:src\App.js - render()의 return 요소 중 subject porps에 사용자 이벤트 추가
<Subject 
  title={this.state.subject.title} 
  sub={this.state.subject.sub}
  onChangePage={function(){
    this.setState({mode:'welcome'});
  }.bind(this)}
></Subject>
  
:src\components\Subject.js retun 요소 중 a테그에 App에 추가한 사용자이벤트 사용 이벤트 추가
<header>
  <h1><a href="/" onClick={function(e){
    e.preventDefault();
    this.props.onChangePage();
  }.bind(this)}>{this.props.title}</a></h1>
  {this.props.sub}
</header>