[React] CRUD

 

 

 

게시물 CRUD 구현하기!

 

 

---

상태 선언

 

1. 선언 타입이 원시 타입(실제 데이터 값을 저장하는 타입)인 경우

원시 타입) String, Number, bigint, boolean, undefined, symbol, null 

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

 

 

2. 참조 타입인 경우

참조 타입) Object, Array

참조 타입인 경우 객체를 복제하여 복제한 객체에 변경된 값을 저장한다.

 

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

 

newValue={...value}
복제본 newValue 변경
setValue(newValue) 변경된 값을 set에 넣는다!

 

 

---

 

1. Create

 

- Create Component

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>
}

 

- APP

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>

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

 

 

 

2. Read

 

- App

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;
      }
    }

 

 

 

 

 

3. Update (Create+Read)

 

- Update Component

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" placeholder="title" value={title} onChange={event=>{
        console.log(event.target.value);
        setTitle(event.target.value);
      }}/></p>
        <p><textarea name='body' placeholder="body" value={body} onChange={event=>{
          console.log(event.target.value);
          setBody(event.target.value);
        }}></textarea></p>
        <p><input type="submit" value="Update"></input></p>
      </form>
  </article>
}

 

- App

 <li><a href={'/update/'+id} onClick={event=>{
      event.preventDefault();
      setMode('UPDATE');
    }}>Update</a></li>

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 newTopics = [...topics]
      const updateTopic = {id:id ,title:title, body:body}
      for(let i=0; i<newTopics.length; i++){
        if(newTopics[i].id === id){
          newTopics[i]= updateTopic;
          break;
        }
      }
      setTopics(newTopics);
      setMode('READ');
    }}></Update>

 

 

 

 

 

4. Delete(비교적 쉬움)

 

- App

<li><input type="button" value="Delete" onClick={()=>{
        const newTopics = []
        for(let i=0; i<topics.length; i++) {
          if(topics[i].id !== id) {
            newTopics.push(topics[i]);
          }
        }
        setTopics(newTopics);
        setMode('WELCOME');
      }} /></li>

 

 

 

CRUD 완!