[React] Update & Delete 기능 구현 - state 변경

Study. React

Update & Delete 기능 구현

[update 구현: state 변경]

📌props로 들어온 데이터를 state로 만들고 form과 동기화 시켰는데 update를 하려면 어디를 업데이트 할지 식별자가 필요함

이때, id는 존재하지만 눈에 보이지 않도록 type="hidden"을 줌

그리고 onSubmit이라는 이벤트가 발생할 때 id값도 추가하고 state로 변경

 

📌UpdateContent.js

constructor(props){
    super(props);
    this.state = {
      id:this.props.data.id,
      title:this.props.data.title,
      desc:this.props.data.desc
    }
    this.inputFormHandler = this.inputFormHandler.bind(this);
  }

this.props.onSubmit(
              this.state.id,
              this.state.title,
              this.state.desc
            );

<input type="hidden" name="id" value={this.state.id}></input>
            <p>
              <input
              type="text" 
              name="title" 
              placeholder="title"
              value={this.state.title}
              onChange={this.inputFormHandler}
              ></input>
            </p>

 

📌불 필요한 코드들 다 지워주고 function안에 변수 _id 추가

📌App.js

}else if(this.state.mode === 'update'){
      _content = this.getReadContent();
      _article = <UpdateContent data={_content} onSubmit={
        function(_id, _title, _desc){
          Array.from(this.state.contents);
        var _content = this.state.contents.concat(
          {id:this.max_content_id, title:_title, desc:_desc}
        )
        this.setState({
          contents:_content
        });
        console.log(_title, _desc);
      }.bind(this)}></UpdateContent>
    }

 

📌자바스크립트로 this.state.contents라는 원본을 복사한 새로운 배열을 만들어주고 _contents라고 이름을 부여함

📌원본을 바꾸지 않음

📌App.js

}else if(this.state.mode === 'update'){
      _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(_content[i].id === _id){
              _contents[i] = {id:_id, title:_title, desc:_desc};
              break;
            }
            i = i + 1;
          }
        this.setState({
          contents:_content
        });
        console.log(_title, _desc);
      }.bind(this)}></UpdateContent>
    }
    return _article
    }

📌create도 

var _contents = Array.from(this.state.contents);

이런 배열 만드는 식으로 변경

📌App.js

}else if(this.state.mode === 'create'){
      _article = <CreateContent onSubmit={function(_title, _desc){
        this.max_content_id = this.max_content_id+1;
        var _contents = Array.from(this.state.contents);
        _contents.push({id:this.max_content_id, title:_title, desc:_desc});
        this.setState({
          contents:_contents
        });
        console.log(_title, _desc);
      }.bind(this)}></CreateContent>

📌다시 update에서 수정하는 걸 바꿔줘야 하니까 setState에서 mode를 read로 바꿔준다

📌App.js

}else if(this.state.mode === 'update'){
      _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(_content[i].id === _id){
              _contents[i] = {id:_id, title:_title, desc:_desc};
              break;
            }
            i = i + 1;
          }
        this.setState({
          contents:_content,
          mode: 'read'
        });
      }.bind(this)}></UpdateContent>
    }

 

📌그리고 create도 모드를 read로 바꾸고 selected_content_id를 사용자가 추가한 값으로 바꿔준다.

📌App.js

 }else if(this.state.mode === 'create'){
      _article = <CreateContent onSubmit={function(_title, _desc){
        this.max_content_id = this.max_content_id+1;
        var _contents = Array.from(this.state.contents);
        _contents.push({id:this.max_content_id, title:_title, desc:_desc});
        this.setState({
          contents:_contents,
          mode:'reade',
          selected_content_id:this.max_content_id
        });
      }.bind(this)}></CreateContent>

💡 update 끄읕-!

 

📎강의: https://opentutorials.org/module/4058/24861