React? -> 메타에서 개발한 오픈소스 자바스크립트 라이브러리

리액트의 본질: 사용자 정의 태그(컴포넌트) 만들기

컴포넌트 함수→ 반드시 대문자로 시작

컴포넌트 상태 변화→ useState

//컴포넌트 상태 변화
import {useState} from 'react';

function App() {

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

//코드 간결하게 바꾸기 ,  mode는 원하는 변수 이름으로 가능
const [mode, setMode]= useState('WELCOME');
const [id, setId]= useState(null);

  const [topics, setTopics]=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++){

      console.log(topics[i].id, id);
      if(topics[i].id===id){
        title = topics[i].title;
        body = topics[i].body;
      }
    }
    content = <Article title={title} body={body}></Article>
  }else if(mode==='CREATE'){
    content = <Create onCreate={(title, body)=>{}}></Create>
  }
  return (
    <div>
      <Header title="REACT" onChangedMode={()=>{
        setMode('WELCOME');

      }}></Header>
      <Nav topics={topics} onChangedMode={(_id)=>{
        setMode('READ');
        setId(_id);
      }}></Nav>
      {content}
      <a href="/create" onClick={event=>{
        event.preventDefault();
        setMode('CREATE');
      }}>Create</a>
    </div>

  );

}