[React] State

const 변수를 state 변수를 바꾸기 위해 -> import {useState} from 'react';

useStae(인자) 의 인자는 그 state의 초기값 = [0]번째 인자값으로 받아들임

const _mode = useState('WELCOME');
const mode = _mode[0];
const mode = _mode[1];

▼ 위 3줄 축약형:
const [mode, steMode] = useState('WELCOME');

import logo from './logo.svg';
import './App.css';
import {useState} from 'react';

function Header(props){
	return <header>
		<h1><a href='/' onClick={function(event){
			event.preventDefault();	//a 태그가 동작하는 기본 동작을 방지
			props.onChangeMode();
	}}>{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(Number(event.target.id));	//문자->숫자로 변환해 주는 Number함수 사용
			}}>{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 [mode, setMode] = useState('WELCOME');
	const [id, setId] = useState(null);	//setId는 nav를 클릭할 때 바뀜
	const topics = [
		{id:1, title:'html', body:'html is ...'},
		{id:2, title:'css', body:'css is ...'},
		{id:3, title:'javascript', body:'javascript is ...'}
	]
	let content = null;
	if(mode == 'WELCOME'){
		content = <Article title="Welcome" body="Hello, WEB"></Article>
	} else if(mode == 'READ'){
		let title, body = null;
		for(let i=0; i<topics.length; i++){
			if(topics[i].id == id){
				title = topics[i].id;
				body = topics[i].body;
			}
		}
		content = <Article title={title} body={body}></Article>
	}
	return (
		<div>
			<Header title="WEB" onChangeMode={function(){
				setMode('WELCOME');
			}}></Header>
			<Nav topics={topics} onChangeMode={(_id)=>{
				setMode('READ');
				setId(_id);
			}}></Nav>
			{content}
		</div>
	);
}

export default App;