생활코딩: 리액트 프로그래밍 CRUD 기본

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

function Header(props){
  return(
    <header>
    <h1><a href="/" onClick={(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));
          /**
            mode==='READ'인 경우 타입이 같아야 하기 때문에  Number를 사용하여 숫자로 바꿔줌. 
             for(let i=0; i<topics.length;i++){
              if(topics[i].id === id) {
           */
        }}>{t.title}</a>
      </li>
    )
  }
  return (
    <nav>
      <ol>
        {lis}
      </ol>
    </nav>
  )
}

function Article(props){

  return (
    <article >
      <h2>{props.title}</h2>
      <p>{props.body}</p>
    </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'></input></p>
        <p><textarea name ='body' placeholder='body'></textarea></p>
        <p><input type='submit' value='Create'></input></p>
      </form>
    </article>
  )
}

function Update(props){
  const [title, setTitle] = useState(props.title)
  const [body, setBody] = useState(props.body)

  return(
    <article>
      <h2>Update</h2>
      <form onSubmit={(event)=>{
        event.preventDefault();
        const title = event.target.title.value
        const body = event.target.body.value
        props.onUpdate(title, body);
      }}>
        <p><input type='text' name='title' value={title} placeholder='title' onChange={(event)=>{
          setTitle(event.target.value)
        }}></input></p>
        <p><textarea name='body' value={body} placeholder='body' onChange={(event)=>{
          setBody(event.target.value)
        }}></textarea></p>
        <p><input type='submit' value='Update'></input></p>

      </form>
    </article>
  )

}




function App() {

  const basicList=[
    {id:1, title:'html', body:'html is....'},
    {id:2, title:'css', body:'css is....'},
    {id:3, title:'js', body:'js is....'}
  ]


  const [mode, setMode] = useState('WELCOME');
  const [id, setId] = useState(null);
  const [nextId, setNextId] = useState(4);
  const [topics, setTopics] = useState(basicList)

 

  let content = null;
  let contextControl = 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].title
        body = topics[i].body
      }
    }
    content = <Article title={title} body={body}></Article>
    contextControl = <>
      <li>
        <a href={'/update/' + id} onClick={(event) => {
          event.preventDefault();
          setMode('UPDATE')
        }}>
          Update
        </a>
      </li>

      <li>
        <input type='button' value='Delete' onClick={(event)=>{
          const newTopics = []
          for(let i=0; i< topics.length; i++){
            if(topics[i].id != id){
              newTopics.push(topics[i])
            }
            // 위 코드가 반복되면 아이디가 같은 요소(현재 글)만 배열에 추가되지 않게 된다.
          }
          setTopics(newTopics) //현재 글만 제외된 배열을 setTopic에 넣는다.
          setMode('WELCOME')
        }}></input>
      </li>
    </>
  
  }else if(mode === 'CREATE'){
    content = <Create onCreate={(_title, _body)=>{
      const newTopic = {id:nextId, title:_title, body:_body};
      const newTopics = [...topics]
      newTopics.push(newTopic)
      setTopics(newTopics)
      setMode('READ')
      setId(nextId);
      setNextId(nextId+1)
    }}></Create>

  }else if(mode === 'UPDATE') {
    let title, body = null;
    for(let i=0;i<topics.length;i++){
      if(topics[i].id === id) {
        title = topics[i].title
        body = topics[i].body
      }
      content = <Update title={title} body={body} onUpdate={(_title, _body)=>{
        console.log(_title, _body)

        const updatedTopic = {id:id, title:_title, body:_body}
        const newTopics = [...topics]

        for(let i=0;i<newTopics.length;i++) {
          if(newTopics[i].id === id) {
            newTopics[i] = updatedTopic
            break;
          }
        }
        setTopics(newTopics);
        setMode('READ')
      }}>

      </Update>
    }

    
  }

 

  return (
    <div>
      <Header title='WEB' onChangeMode={()=>{
        setMode('WELCOME')
      }}></Header>
      <Nav topics={topics} onChangeMode={(_id)=>{
        setMode("READ");
        setId(_id)  
      }}></Nav>
      {content}

      <ul>
        <li>
          <a href='/create' onClick={(event)=>{
            event.preventDefault();
            setMode('CREATE');
          }}>Create</a>
        </li>

        {contextControl}
      </ul>
    </div>
  );
}

export default App;