🔗 생활코딩 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>
        );
      }
    }
      // 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 구현

  • modedelete일 때 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>
    ...