생활코딩 react (16.2-이벤트 설치)

# React-16.2. 이벤트 설치

 

* subject와 toc의 title 클릭시 app의 state를 통해 article 영역(본문)에 해당 컨텐츠를 표시

1. subject 의내용을 풀어서 app에 적용

: src\components\Subject.js - render()의 return 코드
<header>
  <h1><a href="/">{this.props.title}</a></h1>
  {this.props.sub}
</header>

: src\App.js return의 아래 내용을 대체
<Subject 
  title={this.state.subject.title} 
  sub={this.state.subject.sub}>
</Subject>

: src\App.js return에 적용한 코드
<header>
  <h1><a href="/">{this.state.subject.title}</a></h1>
  {this.state.subject.sub}
</header>

2. 이벤트 적용

: 1차 적용 이벤트 - 실행 후 화면이 다시 로딩된다.
onClick={function(){
  alert('hi');
}}

: 2차 적용 이벤트 - 디버그로 로그 표시 (콘솔에서 e.preventDefault(); 로 새로고침 제한 테스트)
onClick={function(e){
  console.log(e);
  debugger;
}}

: 3차 적용 이벤트 - 화면 새로고침 방지 이벤트 적용
onClick={function(e){
  console.log(e);
  e.preventDefault();
}}

 - subject title을 클릭하면 e.preventDefault로 인해 새로고침이 되지 않음