[React] Day 8 - create 구현 2

Contents 변경

concat 함수 사용

➡️이러한 방법으로 사용할 수 있는 concat 함수를 사용하여 우리가 입력한 title과 description 값을 추가해 줄 수 있다.

 

➡️이와같이 push 함수를 사용해도 원소를 추가할 수는 있지만 concat과는 달리 원본이 변경된다. 따라서 concat의 방법을 사용하려고 한다.

 

📢push대신 concat를 사용하는 이유

    -> push는 성능적인 부분에서 많이 떨어진다.

 

App.js 추가내용

var _title, _desc, _article = null;

    if (this.state.mode === 'welcome') {
      _title = this.state.welcome.title;
      _desc = this.state.welcome.desc;
      _article = <ReadContent title={_title} desc={_desc}></ReadContent>;
    } else if (this.state.mode === 'read') {
      var i = 0;
      while (i < this.state.contents.length) {
        var now_data = this.state.contents[i];
        if (now_data.id === this.state.selected_content_id) {
          _title = now_data.title;
          _desc = now_data.desc;
        }
        i = i + 1;
      }
      _article = <ReadContent title={_title} desc={_desc}></ReadContent>;
    } else if (this.state.mode === 'create') {
      _article = <CreateContent onSubmit={function(_title, _desc){
        // add content to this.state.contents
        this.max_content_id = this.max_content_id + 1;
        // this.state.contents.push(
        //   {id:this.max_content_id, title:_title, desc:_desc}
        // );
        // this.setState({
        //   contents:this.state.contents
        // });
        var _contents = this.state.contents.concat(
          {id:this.max_content_id, title:_title, desc:_desc}
        )
        this.setState({
          contents:_contents
        });
        console.log(_title);
        console.log(_desc);
      }.bind(this)}></CreateContent>
    }

 

➡️push가 아닌 concat으로 title과 description 값을 추가하여 새로 띄워냈다.

 

결과 사진