[생활코딩] 이벤트 설치

 

생활코딩 https://www.youtube.com/watch?v=3h7MidkDTBU&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=20 

 

 

* 링크걸기

import React,{Component} from 'react';

class Subject extends Component{
    render(){ //class 안에 함수는 function을 생략할 수 있다.
      console.log('subject render');
      return (
        <header>
          <h1><a href="/">{this.props.title}</a></h1>
          {this.props.sub}
      </header>
    );
  
    }
  }
export default Subject;

 

 

* react와 같은 application 을 사용할 때 reload를 하지 않아도 역동적인 사이트를 만들 수 있다는 장점이 있다.

a 태그를 클릭했을 때, href 가 가리키는 페이지로 이동되는 기본적인 동작이 실행되지 않고 onClick에 넘겨준 것만 실행되게 하기 위해서 e.preventDefault(); 코드를 추가한다. 

 

<header>
	<h1><a href="/" onClick={function(e){
		console.log(e);
		e.preventDefault(); //page가 reloading되지 않는다.
	}}>{this.state.subject.title}</a></h1>
	{this.state.subject.sub}
</header>

 

import React,{Component} from 'react';
import TOC from "./components/TOC";
import Content from './components/Content';
import Subject from './components/Subject';
import './App.css';

class App extends Component{
  constructor(props){
    super(props);
    this.state={
      mode:'read',
      subject:{title:'WEB',sub:'world wide web!!'},
      welcome:{title:'Welcome',desc:'Hello, React!!'},
      contents:[
        {id:1, title:'HTML', desc:'HTML is HyperText ...'},
        {id:2, title:'CSS', desc:'CSS is for design'},
        {id:3, title:'JavaScript', desc:'JavaScript is for interactive'}
      ]
    }
  }
  render(){
    console.log('App render');
    var _title, _desc = null;
    if(this.state.mode === 'welcome'){
      _title = this.state.welcome.title;
      _desc = this.state.welcome.desc;
    }else if(this.state.mode === 'read'){
      _title = this.state.contents[0].title;
      _desc = this.state.contents[0].desc;
    }
    return(
      <div className="App">
      <header>
        <h1><a href="/" onClick={function(e){
          console.log(e);
          e.preventDefault(); //page가 reloading되지 않는다.
        }}>{this.state.subject.title}</a></h1>
        {this.state.subject.sub}
      </header>
      <TOC data={this.state.contents}></TOC>
      <Content title={_title} desc={_desc}></Content>
    </div>
    );
  }
}

export default App;