⑦ Update & Delete 기능 구현

🔗 생활코딩 React

1. update 구현

• CreateContent.js를 복사해서 UpdateContent.js 생성
• Content 생성하는 부분을 getContent() 함수로 분리
• 제목, 내용 가져오는 부분을 getReadContent() 함수로 분리

// 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;
          break;
        }
        i = i + 1;
      }
  }
getContent(){
    var _title, _desc, _article = null;
    if(this.state.mode === 'welcome'){
      ...
      _article = <ReadContent title={_title} desc={_desc}></ReadContent>
    }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'){
      _article = <CreateContent onSubmit={function(_title, _desc){
        ...
      }.bind(this)}></CreateContent>
    }else if(this.state.mode === 'update'){
      _content = this.getReadContent();
      _article = <UpdateContent data={_content} onSubmit={function(_title, _desc){
        ...
      }.bind(this)}></UpdateContent>
    }
    return _article;
  }
  render() {
    return (
      <div className="App">
        <Subject ...></Subject>
        <TOC ...> </TOC>
        <Control ...></Control>
        {this.getContent()}
      </div>
    );
  }

1) form

🔗 forms

// UpdateContent.js
class UpdateContent extends Component {
  constructor(props){	
    super(props);
    this.state = {	// props는 readonly이므로 가변적으로 만들기 위해 state화
      title:this.props.data.title,
      desc:this.props.data.desc
    }
    // inputFormHandler 함수 뒤에 붙는 .bind(this)가 중복되므로 미리 설정하여 제거
    this.inputFormHandler = this.inputFormHandler.bind(this);
  }
    inputFormHandler(e){
      // e.target.name으로 이벤트 객체의 name 값인 title / desc 값 가져옴
      this.setState({[e.target.name]:e.target.value});
    }
    render(){
      return(
        <article>
            <h2>Update</h2>
            <form ...>
              <p>
                <input 
                  type="text" 
                  name="title" 
                  placeholder="title"
                  value={this.state.title}
                  onChange={this.inputFormHandler}	// state를 변경하기 위해 필요
                ></input></p>
              <p>
                <textarea onChange={this.inputFormHandler}
                  name="desc" 
                  placeholder="description" 
                  value={this.state.desc}></textarea>	// html과 다르게 value로 기본값 설정
              </p>
              <p>
                <input type="submit"></input>
              </p>
            </form>
        </article>
      );
    }
  }

2) state 변경

• UpdateContent.js에 id 추가

// UpdateContent.js
class UpdateContent extends Component {
  constructor(props){
    super(props);
    this.state = {
      id:this.props.data.id,	// state 추가
      title:this.props.data.title,
      desc:this.props.data.desc
    }...
  }...
    render(){
      return(
        <article>
            <h2>Update</h2>
            <form ...>
              // hidden 타입으로 id 값 넘겨줌
              <input type="hidden" name="id" value={this.state.id}></input>
              ...
            </form>
        </article>
      );
    }
  }

```jsx
// App.js
...
}else if(this.state.mode === 'update'){
  _content = this.getReadContent();
  _article = <UpdateContent data={_content} onSubmit={
    function(_id, _title, _desc){	// _id 파라미터 받기
      var _contents = Array.from(this.state.contents);	// contents 복제
      var i = 0;
      while(i < _contents.length){	// 파라미터로 들어온 id와 같은 id인 content 수정
        if(_contents[i].id === _id){
          _contents[i] = {id:_id, title:_title, desc:_desc};
          break;
        }
        i = i + 1;
      }
    this.setState({
      contents:_contents,	// 새로운 content 추가
      mode:'read'	// read 모드로 전환(작성한 글 바로 보기)
    });
  }.bind(this)}></UpdateContent>
}
...
```

2. delete 구현

• mode가 delete일 때 splice 함수를 이용하여 삭제

// App.js
...
<Control onChangeMode={function(_mode){
    if(_mode === 'delete'){
      if(window.confirm('really?')){
        var _contents = Array.from(this.state.contents);
        var i = 0;
        while(i < _contents.length){
          if(_contents[i].id === this.state.selected_content_id){
            _contents.splice(i, 1); // i번째부터 1개 삭제
            break;
          }
          i = i + 1;
        }
        this.setState({
          mode:'welcome',
          contents:_contents
        });
        alert('deleted!');
      }
    }else{
      this.setState({
        mode:_mode
      });
    }
  }.bind(this)}>
</Control>
...