(Alice AI 트랙 React) - CRUD 코드 복습

CRUD 기능이란?

• 대부분의 소프트웨어가 가지는 기본적인 데이터 처리 기능을 일컫는다.
• Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말.

CREATE, READ 코드

1. Control 함수 생성

1. onChangeMode의 속성값으로 changeHandler 전달
2. <a> 태그로 감싸진 "Create" 의 onClick 이벤트에 props.onChangeMode()를 호출함으로써 changeHandler 함수 실행
3. setState인 setMode('CREATE')가 호출 됨으로써 React는 다시 렌더링 된다.

• 이때 setState는 비동기 함수이므로 이벤트 핸들러가 끝나는 시점에 React가 다시 렌더링을 실시한다.

<Control onChangeMode={changeHandler}></Control>

function changeHandler(){
    setMode('CREATE');
  }

function Control(props){
  return (
    <ul>
      <li><a href="create.html" onClick={
        function(ev){
          ev.preventDefault();
          props.onChangeMode();
        }
      }>Create</a></li>
    </ul>
  )
}

2. setMode('Create')

1. mode의 값이 setMode('Create')로 인해 'Create'로 변경되었으므로 리액트가 이를 인지하고 재 렌더링 실시.
2. selectHandler 함수에서 mode가 'CREATE'일 때 실행되는 함수인 createHandler(_title,_body) 실행.
3. Object State인 topics의 값을 복사한 newTopics 변수를 생성 한 뒤 해당 값에 topics의 속성값들을 push한다.
4. 해당 변수를 setTopics(newTopics)에 넣어줌으로써 state값을 변경한다.
5. setMode('READ')를 통해 다시 상태값을 READ로 변경함으로써 CREATE 작업을 수행 후 초기 화면으로 이동한다.

 <Header title="html" onSelect={selectHandler}></Header>
      <Nav src={topics} onSelect={selectHandler}></Nav>
      {articleComp}

var [topics, setTopics] = useState([
    {id:1, title:'html', body:'html is ..'},
    {id:2, title:'css', body:'css is ..'}
  ];
  ]);

function App(){
  ...
function selectHandler(_id){
  ...
else if(mode === 'CREATE') {
    function createHandler(_title,_body){
      // topics.push({title:_title, body:_body});
      // setTopics(topics);
      var newTopics = [...topics];
      newTopics.push({id:nextId, title:_title, body:_body});
      setTopics(newTopics);
      setMode('READ');
      setId(nextId);
      setNextId(nextId+1);
    }
    articleComp = <Create onCreate={createHandler}></Create>
  }
    ...
  }

setMode('READ')

1. mode의 상태값이 'READ'일 때 실행된다. (새로고침과 유사한 효과)

 if(mode === 'READ'){
    var title, body;
    for(var i=0; i<topics.length; i++){
      var item = topics[i];
      if(item.id === id){
        title = item.title;
        body = item.body;
      }
    }
    articleComp = <Article title={title} body={body}></Article>
  }

DELETE

생성된 Control 함수 이용.

1. Control 함수의 onChangeMode에 changeHandler함수를 속성값으로 전달.
2. changeHandler 함수에 매개변수 _mode를 통해 기존에 만들어진 CREATE와 구분을 지어줌.
   ex) _mode가 CREATE일 땐 생성, DELETE일 땐 삭제
3. 새로운 배열 객체 newTopics 생성
4. 선택한 객체의 id값을 가져와서 topics 객체에 존재하는 id이면 newTopics에 추가하지 않음, 그 외에 topics 객체에 존재하는 id값을 newTopics에 추가.
5. newTopics를 setTopics('newTopics')를 통해 state값 변경. => 재 렌더링
6. 해당 과정을 통해 DELETE 작업 수행.
7. setMode('Welcome') 수행.

<Control onChangeMode={changeHandler}></Control>


function Control(props){
  return (
    <ul>
      ...
      <li>
        <form onSubmit={
          function(ev){
            ev.preventDefault();
            props.onChangeMode('DELETE');
          }
        }>
          <input type="submit" value="delete"></input>
        </form>
      </li>
    </ul>
  )
}
function App(){
  ...
function changeHandler(_mode){
    debugger;
    console.log('id', id);
    if(_mode === 'DELETE'){
      // 삭제한다. 
      var newTopics = [];
      for(var i=0; i<topics.length; i++){
        if(topics[i].id === id){
          
        } else {
          newTopics.push(topics[i]);
        }
      }
      setTopics(newTopics);
      setMode('WELCOME');
    } else {
      setMode(_mode);
    }
  }
 ... 
}

UPDATE

생성된 Control 함수 이용.

1. Control 함수의 onChangeMode에 changeHandler함수를 속성값으로 전달.
2. changeHandler 함수에 매개변수 _mode를 통해 UPDATE 전달.

<Control onChangeMode={changeHandler}></Control>

 function Control(props){
  return (
    <ul>
      //CREATE
      ... 
      <li><a href="update.html" onClick={
        function(ev) {
          ev.preventDefault();
          props.onChangeMode('UPDATE');
        }
      }>update</a></li>
      <li>
	...
        //DELTETE
    </ul>
  )
}

State 값으로 다시 렌더링

1. 현재 선택된 값의 속성값들을 newTopics에 push하고 setTopics(newTopics)를 통해 topics 상태값을 변경.
2. setMode('READ')를 통해 작업 수행 후 READ 상태로 변경.

function App(){
  ...
function updateHandler(_title,_body){
      var newTopics = [];
      for(var i=0; i<topics.length; i++){
        var topic = topics[i];
        if(topic.id === id){
          newTopics.push({id:topic.id, title:_title, body:_body});
        } else {
          newTopics.push(topic);
        }
      }
      setTopics(newTopics);
      setMode('READ');
    }
    var data;
    for(var i=0; i<topics.length; i++){
      var topic = topics[i];
      if(topic.id === id){
        data = topic;
      }
    }
    ...
  }
...
}

UPDATE값 화면에 표시.

articleComp = <Update onUpdate={updateHandler} data={data}></Update>
  
function Update(props){
  var [title, setTitle] = useState(props.data.title);
  var [body, setBody] = useState(props.data.body);
  function submitHandler(ev){
    ev.preventDefault();
    var title = ev.target.title.value;
    var body = ev.target.body.value;
    props.onUpdate(title, body);
  }
  return (
    <article>
        <h2>Update</h2>
        <form onSubmit={submitHandler}>
          <p><input type="text" name="title" value={title} onChange={
            function(ev){
              setTitle(ev.target.value);
            }
          } /></p>
          <p><textarea name="body"  value={body} onChange={
            function(ev){
              setBody(ev.target.value);
            }
          }></textarea></p>
          <p><input type="submit" /></p>
        </form>
      </article>
  )
}