[생활코딩/React] 20.update 구현

참고자료: 유튜브 생활코딩 React https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi

 

1.  update 구현

---

내가 선택한 요소를 넘겨보자

//App.js
  getReadContent(){
      var i = 0;
      while(i < this.state.contents.length) {
        var data = this.state.contents[i];
        if(data.id === this.state.selected_content_id) {
          return data
        }
        i = i + 1;
      }
  }
  getContent(){
    var _title, _desc, _article = null;
    if(this.state.mode === 'welcome') {
      ...중략...
    } else if (this.state.mode === 'read') {
      var _content = this.getReadContent();
      _article = <ReadContent title={_content.title} desc={_content.desc}></ReadContent>
    } else if (this.state.mode === 'create') {
      ...중략...
    } else if (this.state.mode === 'update') {
      var _content = this.getReadContent();
      _article = <UpdateContent data={_content} onSubmit={function(_title, _desc){
        var _contents = this.state.contents.concat(
          {id: this.max_content_id, title: _title, desc: _desc}
        )
        this.setState({
          contents: _contents
        })
      }.bind(this)}></UpdateContent>
    }
    return _article;
  }
  render () {
  ...중략...
  }

👉🏻먼저 내가 선택한 TOC의 요소를 반환하는 코드를 getReadContent라는 함수에 따로 담아준다.

👉🏻그리고 render에서 return이외의 코드들을 getContent라는 함수에 넣어준다.

👉🏻getContent에서 mode가 'read'일 때와 'update'일 때 어떤 TOC를 선택했는지 알아야 하므로 getReadContent함수를 사용해 _content에 담아준다. 그리고 이를 data props를 통해 넘겨준다.

 

2.  form

---

//Update.js
import React, { Component } from 'react';

class UpdateContent extends Component {
    constructor(props) {
      super(props);
      this.state = {
        title:this.props.data.title,
        desc:this.props.data.desc,
      }
      this.inputFormHandler = this.inputFormHandler.bind(this);
    }
    inputFormHandler(e){
      this.setState({[e.target.name]:e.target.value});
    }
    render () {
      return (
        <article>
            <h2>Update</h2>
            <form action="/create_process" method="post"
              onSubmit={function(e){
                e.preventDefault();
                this.props.onSubmit(
                  e.target.title.value,
                  e.target.desc.value
                );
              }.bind(this)}
            >
              <p>
                <input 
                  type="text" 
                  name="title"
                  placeholder='title'
                  value={this.state.title}
                  onChange={this.inputFormHandler}>
                </input>
              </p>
              <p>
                <textarea 
                  name="desc" 
                  placeholder='description' 
                  value={this.state.desc}
                  onChange={this.inputFormHandler}>
                </textarea>
              </p>
              <p>
                <input type="submit"></input>
              </p>
            </form>
        </article>
      );
    }
  }

  export default UpdateContent;

👉🏻constructor에서 받아온 props의 title과 desc를 state의 title과 desc로 저장한다.

👉🏻그리고 inputFormHandeler를 만들어 state의 title과 desc의 내용을 변경하는 코드를 저장한다. 그리고 이 함수를 input의 onChange에서 사용해 사용자가 내용을 수정할 때마다 반영되도록 한다.

👉🏻내가 수정한 내용이 잘 적힌다!

 

3.  state 변경

---

  getContent(){
    var _title, _desc, _article = null;
    if(this.state.mode === 'welcome') {
      ...중략...
    } else if (this.state.mode === 'update') {
      var _content = this.getReadContent();
      _article = <UpdateContent data={_content} onSubmit={
        function(_id, _title, _desc){
          var _contents = Array.from(this.state.contents);
          var i = 0;
          while(i < _contents.length) {
            if(_contents[i].id === _id) {
              _contents[i] = {id: _id, title: _title, desc: _desc};
              break;
            }
            i = i + 1;
          }
          this.setState({
            contents: _contents
          })
      }.bind(this)}></UpdateContent>
    }
    return _article;
  }

👉🏻onSubmit 부분에 코드를 작성한다. contents state를 복제해서 받아온 인자의 id값과 동일한 요소를 찾아내 내용을 변경시켜준다.

👉🏻수정한 내용이 잘 반영되었다!