-
[생활코딩] 컴포넌트 이벤트 만들기 3REACT 2022. 2. 1. 00:26
생활코딩 https://www.youtube.com/watch?v=11mTvRtXx4g&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=26
App state에 selected_content_id 이름을 줘서 선택된 content를 selected_content_id에 표시할 것이다.
그 값과 contents 객체에서 id 값과 비교하여 일치하는 것을 표출하도록 할 것이다.
App.js 에서 <TOC> 부분
<TOC onChangePage={function(id){ this.setState({ mode:'read' }) }.bind(this)} data={this.state.contents}> </TOC>
App.js 에서 render() 부분
mode가 read로 변경되었을 때
this.state.contents[i].id 값과 this.state.selected_content_id 값을 비교하여 일치한다면 해당 content 내용을 표출시켜준다.
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'){ var i =0; while(i<this.state.contents.length){ var data = this.state.contents[i]; if(data.id === this.state.selected_content_id){ _title = data.title; _desc = data.desc; break; } i=i+1; } }
선택한 내용으로 화면에 보여지기 위해
data-id 속성 이용하기
여기서 e.target.dataset.id 정보를 onChangePage 함수를 호출하는 코드의 인자로 넣어주면 된다.
App.js
<TOC onChangePage={function(id){ this.setState({ mode:'read', selected_content_id:Number(id) }) }.bind(this)} data={this.state.contents}> </TOC>
TOC.js render()
render(){ var lists =[]; var data = this.props.data; var i =0; while(i < data.length){ lists.push( <li key={data[i].id}> <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)} >{data[i].title}</a> </li>) i=i+1; } return( <nav> <ul> {lists} </ul> </nav> ); }
Number는 문자를 강제로 숫자로 변경해주는 함수이다.
-------
data-id 가 만약 data-iddd 라면
e.target.dataset.iddd 로 변경하면 된다.
-------
만약 속성을 이용하지 않는다면 이렇게 인자 값을 수정하여 적용할 수 있다.
import React, {Component} from 'react'; class TOC extends Component{ render(){ var lists =[]; var data = this.props.data; var i =0; while(i < data.length){ lists.push( <li key={data[i].id}> <a href={"/content/"+data[i].id} onClick={function(id,e){ e.preventDefault(); this.props.onChangePage(id); }.bind(this,data[i].id)} >{data[i].title}</a> </li>) i=i+1; } return( <nav> <ul> {lists} </ul> </nav> ); } } export default TOC;
728x90'REACT' 카테고리의 다른 글
[생활코딩] create 구현 : mode 전환 기능 / form / onSubmit 이벤트 /contents 변경 / shouldComponentUpdate / Array.from / Object.assign (0) 2022.02.01 [생활코딩] create 구현 : mode 변경 기능 (0) 2022.02.01 [생활코딩] 컴포넌트 이벤트 만들기2 (0) 2022.01.31 [생활코딩] 컴포넌트 이벤트 만들기1 (0) 2022.01.31 [생활코딩] 이벤트에서 state 변경하기 / bind함수 / setState함수 (0) 2022.01.31