[React] Props & Event

• Props ? = React에서 부르는 속성

import logo from './logo.svg';
import './App.css';

function Header(props){
	return <header>
		<h1><a href='/' onClick={function(event){	// 클릭 시 이벤트 발생
			event.preventDefault();	//a 태그가 동작하는 기본 동작을 방지
			props.onChangeMode();	// props 이벤트 출력
	}}>{props.title}</a></h1>
	</header>
}

function Nav(props){
	const lis = []
	for(let i=0; i<props.topics.length; i++){
		let t=props.topics[i];
		lis.push(<li key={t.id}>	// "목록 번호 + 내용" 넣기
			<a id={t.id} href={'/read/'+t.id} onClick={event=>{
				event.preventDefault();
				props.onChangeMode(event.target.id);	// 목록 번호 이벤트 발생
			}}>{t.title}</a>
			</li>)
	}
	return <nav>
		<ol>
			{lis}
		</ol>
	</nav>
}

function Article(props){
	return <article>
		<h2>{props.title}</h2>
		{props.body}
	</article>
}

function App() {
	const topics = [
		{id:1, title:'html', body:'html is ...'},
		{id:2, title:'css', body:'css is ...'},
		{id:3, title:'javascript', body:'javascript is ...'}
	]
	return (
		<div>
			<Header title="WEB" onChangeMode={function(){
				alert('Header');	// 'Header' 내용 알림창 출력
			}}></Header>
			<Nav topics={topics} onChangeMode={(id)=>{
				alert(id);			// id 값 알림창 출력
			}}></Nav>
			<Article title="Welcome" body="Hello, WEB"></Article>
		</div>
	);
}

export default App;