-
[생활코딩] 컴포넌트 이벤트 만들기1REACT 2022. 1. 31. 23:31
생활코딩 https://www.youtube.com/watch?v=NFR7vDArVlY&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=24
Subject Component 에 이벤트를 설치하고 싶다면 onChangePage 이벤트를 사용하여 onChangePage 이벤트에 설치한 함수를 호출하도록 만들면 된다.
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; } console.log('render',this); return( <div className="App"> <Subject title={this.state.subject.title} sub={this.state.subject.sub} onChangePage={function(){ this.setState({mode:'welcome'}); }.bind(this)} > </Subject> <TOC data={this.state.contents}></TOC> <Content title={_title} desc={_desc}></Content> </div> ); } } export default App;
Subject Component는 페이지가 바뀌었을 때 componenet 사용자가 설치한 함수를 호출해주기만 하면 되는데,
onChangePage 는 props 형태로 Subject에 전달된다.
import React,{Component} from 'react'; class Subject extends Component{ render(){ console.log('subject render'); return ( <header> <h1><a href="/" onClick={function(e){ e.preventDefault(); this.props.onChangePage(); //함수호출 }.bind(this)}>{this.props.title}</a></h1> {this.props.sub} </header> ); } } export default Subject;
728x90'REACT' 카테고리의 다른 글
[생활코딩] 컴포넌트 이벤트 만들기 3 (0) 2022.02.01 [생활코딩] 컴포넌트 이벤트 만들기2 (0) 2022.01.31 [생활코딩] 이벤트에서 state 변경하기 / bind함수 / setState함수 (0) 2022.01.31 [생활코딩] 이벤트 설치 (0) 2022.01.31 [생활코딩] 이벤트 state props 그리고 render 함수 (0) 2022.01.31