React Basic CRUD

   prop와 state를 통한 컴포넌트 관리   

• 실행
• 블로그 일지

실행 기능

React Code

import React,{useState} from "react"
import "./App.css"
const Header = props => {a
return(
  <>
  <h1><a href="./" onClick={e=>{
    e.preventDefault();
    props.onChangeMode()
  }}>{props.title}</a></h1>
  </>
)
}
const Nav = props => {
  let t = props.topics;
  let lis = t.map(item => {
      return(
      <li key={item.id}>
        <a href={"/"+t.id} onClick={e=>{
          e.preventDefault()
          props.onChangeMode(item.id)
        }}>
          {item.title}
        </a>
      </li>)
  })
return(
  <>
    <ol>
      {lis}
    </ol>
  </>
)
}
const Article = props => {
return(
  <article>
    <h2>{props.title}</h2>
    <p>{props.body}</p>
  </article>
)
}
const Create = (props) => {
  let title, body = null
  return(
    <div>
      <h2>Create</h2>
        <form onSubmit={(e)=>{
          e.preventDefault();
          title = e.target.title.value
          body = e.target.body.value
          props.onCreate(title, body)
        }}>
          <p><input type="text" name="title" placeholder="Program Name" /></p>
          <p><textarea name="body" placeholder="Explanation" /></p>
          <input type="submit" value="Create"/>
        </form>
    </div>
  )
}
const Update = (props) => {
  let [title, setTitle] = useState(props.title)
  let [body, setBody] = useState(props.body)
  return(
    <div>
      <h2>Update</h2>
        <form onSubmit={(e)=>{
          e.preventDefault();
          props.onUpdate(title, body)
        }}>
          <p><input type="text" name="title" placeholder="Program Name" value={title} onChange={e=>{
            setTitle(e.target.value)
          }}/></p>
          <p><textarea name="body" placeholder="Explanation" value={body} onChange={e=>{
            setBody(e.target.value)
          }}/></p>
          <input type="submit" value="Update"/>
        </form>
    </div>
  )  
}
const App = () => {
  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 ...'}
  ])
  const [mode, setMode] =useState('WELCOME')
  const [id, setId] = useState(1)
  const [nextId, setNextId] = useState(4)

  let content = null;
  let body, title = null
  let newTopic, newTopics = null;
  let control = null;

  switch (mode){
    case 'READ':
    topics.map(item=> {
      if(id === item.id ) {
        title = item.title;
        body = item.body;        
      }
    })

      content = <Article title={title} body={body}/>
      control = 
      <>
        <li>
          <a href="/create" onClick={e=>{
            e.preventDefault()
            setMode('CREATE')
          }}>Create</a>
        </li>
        <li>
          <a href="/update" onClick={e=>{
            e.preventDefault()
            setMode('UPDATE')
          }}>Update</a>
        </li>
        <li>
          <button onClick={()=> {
            newTopics = topics.filter(item => item.id !== id)
            setTopics(newTopics)
            setMode('WELCOME')
          }}>Delete</button>
        </li>
      </>
      break;
    case 'CREATE':
      content = <Create onCreate={(title, body)=>{
        newTopic = {id:nextId, title:title, body:body}
        newTopics = [...topics]
        newTopics.push(newTopic)
        setTopics(newTopics)
        setId(nextId)
        setNextId(nextId+1)
        setMode('READ')
      }}/>      
      break;
    case 'UPDATE': 
      let updatedTopics = topics.filter(itme => id === itme.id)
        .map(item => {return(title=item.title, body=item.body)})
      content = <Update title={title} body={body} onUpdate={(title, body)=>{
        updatedTopics= topics.map(item => id === item.id ? {id:id, title:title, body:body} : item )
        setTopics(updatedTopics)
        setMode('READ')
      }}/>
      break;
    default: 
      content = <Article title={'Welcome'} body={"Web Development Industrial"}/>
      control = 
      <li>
        <a href="/create" onClick={e=>{
          e.preventDefault()
          setMode('CREATE')
        }}>Create</a>
      </li>
  }
  return (
    <div>
      <Header title={'WEB'} onChangeMode={()=>{
        setMode('WELCOME')
      }} />
      <Nav topics={topics} onChangeMode={(id)=>{
        setId(id)
        setMode('READ')
      }}/>
      {content}
      <ul>
        {control}
      </ul>
    </div>
  );
}

export default App;