[React] Create

const[value, setValue] = useState(PRIMITIVE);

▶ PRIMITIVE 타입: string, number, boolean, null 등

const[value, setValue] = useState(Object);
▶ Object 타입: object, array

1. 데이터가 object 일 경우

newValue={.. value }	// value값을 복제한 새로운 value값 지정
newValue 변경	// original value 값을 변경하지 않고 복제한 value의 값을 변경해줘야 한다
setValeu(newValue)	// 이때 컴포넌트가 다시 실행됨

2. 데이터가 arrary 일 경우

newValue = [...value]
newValue 변경
setValue(newValue)

• 일반적인 경우

const[value, setValue] = useState([1]);	//
value.push(2);	// original 데이터를 바꾸는 것
setValue(value);	// original 데이터를 입력해 주는 것

※ setValue에서 original 데이터와 새로 들어온 데이터가 같은지 확인하고 같다면 다시 컴포넌트를 다시 랜더링 하지 않음

• 만약 같을 경우: 복제값을 만든다 !

const newValue = [...value];
newValue.push(2);
setValue(newValue);

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();	
			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));
			}}>{t.title}</a>
			</li>)
	}
	return <nav>
		<ol>
			{lis}
		</ol>
	</nav>
}

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

function Create(props){	// 새로운 컴포넌트 생성 함수
	return <article>
		<h2>Create</h2>
		<form onSubmit={event=>{
			event.preventDefault();
			const title=event.target.title.value;
			const body=event.target.body.value;
			props.onCreate(title, body);
		}}>
			<p><input type="text" name="title" placeholder='title'/></p>
			<p><textarea name='body' placeholder='body'></textarea></p>
			<p><input type="submit" value="Create"></input></p>
		</form>
	</article>
}
function App() {
	const [mode, setMode] = useState('WELCOME');
	const [id, setId] = useState(null);
	const [nextId, setNextId] = useState(4);
	const [topics, setTopics]= useState([	// useState 적용
		{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>
	} else if(mode == 'CREATE'){
		content = <Create onCreate={(_title, _body)=>{
			const newTopic={id:nextId, title:_title, body:_body};
			const newTopics=[...topics];	// topics 복제하기 -> newTopics
			newTopics.push(newTopic);	// 값 변경
			setTopics(newTopics);	// 적용
		}}></Create>
	}
	return (
		<div>
			<Header title="WEB" onChangeMode={function(){
				setMode('WELCOME');
			}}></Header>
			<Nav topics={topics} onChangeMode={(_id)=>{
				setMode('READ');
				setId(_id);
			}}></Nav>
			{content}
			<a href="/create" onClick={event=>{
				event.preventDefault();
				setMode('CREATE');
			}}>Create</a>
		</div>
	);
}

export default App;