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

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

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

 - 17.2 : Toc의 요소를 선택하면 App의 mode 속성을 변경하도록 이벤트 등록

 

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

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

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

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

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

(정리)
:src\App.js - render()의 return 요소 중 subject porps에 사용자 이벤트 추가
<Toc 
  onChangePage={function(){
    this.setState({mode:'read'});
  }.bind(this)}
  data={this.state.contents}
></Toc>
  
:src\components\Toc.js retun 요소로 생생하는 리스트의 a테그에 App에 추가한 사용자이벤트를 사용하는 이벤트 추가
lists.push(
  <li key={data[i].id}>
    <a 
      href={"/content/"+data[i].id}
      onClick={function(e){
        e.preventDefault();
        this.props.onChangePage();
      }.bind(this)}
    >{data[i].title}</a>
  </li>);