React#4_컴포넌트 이벤트 만들기

Number(id)하면 문자인 id가 숫자가 됨

e.target하면 해당 e 이벤트를 소지하고 있는 html태그를 가리킴

<a e.target> 하면 a태그를 가리킴

<a href={"/content/"+data[i].id}
   data-id={data[i].id}
   onClick={function(e){
   e.preventDefault(); //페이지가 바뀌지 않게 해줌(현재페이지 유지)
   this.props.onChangePage(e.target.dataset.id);
}.bind(this)}

a태그를 클릭하여 페이지가 바뀌면e.target.dataset.를 통해 data-에 접근할 수 있음.

e.target.dataset.id값이 data[i].id로 바뀜 -->function을 부른 <TOC onChangePage={function(id){ //id로 바뀐 id값을 받아와서
this.setState({
selected_content_id:Number(id) //id를 숫자로 바꿔서 넣음
})
} }
==>페이지가 바뀌었으니까 재렌더링이 됨.

render() 안 code

else if(this.state.mode === 'read'){ //3개 리스트 중 선택했으면 mode가 read고
var i = 0;
while(i < this.state.contents.length){
var data = this.state.contents[i]; //data에 순서대로 contents값을 넣어주고
if(data.id === this.state.selected_content_id){ //선택된 숫자와 같으면(클릭한 a태그에 따라)
_title = data.title; //값 변경해서 Content에 출력되게 함
_desc = data.desc;
break;
}
i = i + 1;
}

App.js

<Content onChangeMode={function(_mode){  //Content 컴포넌트에 onChangeMode라는 이름으로 함수를 넘겨줬으니까
         this.setState({ mode:_mode })                                   
  }}></Content>

Content.js

this.props.onChangeMode('create'); //Content컴포넌트 안에서 onChangeMode함수 안에 값이 App.js의 function의 인자로 넘어간다.