[React] Create 기능 구현 - mode 변경 & ShouldComponentUpdate

Study. React

Create 기능 구현

[create 기능 구현: mode 변경]

📌지금까지 CreateContent 컴포넌트에서 onSubmit 이벤트가 발생했을 때 _title, _desc값을 넘겨주기까지 끝

📌그다음에는 state의 contents 값 맨 뒤에 사용자가 입력한 값을 추가하는 부분을 진행

📌max_content_id : ui에 영향이 없기 때문에 state값이 아닌 일반 변수로 지정

 

📌App.js 에 onSubmit부분에 아래 코드를 추가

📌setState가 없으면 contents에 무엇이 추가되었는지 모르기 때문에 꼭 setState를 적어주어야 함

}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
        });
        console.log(_title, _desc);
      }.bind(this)}></CreateContent>
    }

📌그리고 추가할 내용을 입력하고 제출을 누르면 아래 사진과 같이 React가 정상적으로 추가되는 것을 알 수 있음

📌그러나 이 방법은 안 되는 것은 아니지만 React의 성능을 개선하고자 할 때 불편할 수 있음

📌이제부터 더 괜찮은 방법을 알아보자

📌배열이 있는데 배열에 데이터를 추가하는 방법은 push와 concat이 있음

📌push는 원본을 변경하지만 concat은 원본을 바꾸는 것이 아니라 원본을 변경한 새로운 배열이 리턴되어서 원본이 그대로 남아있음. 그래서 state에는 원본 데이터를 바꾸는 push 대신 concat을 사용하는 것이 좋음

📌결론: push는 기존에 있었던 배열에 데이터를 추가하면 원본 데이터가 날라가서 성능을 개선하고자 할 때 번거로울 수 있음 그래서  새롭게 만들어진 데이터로 교체되는 concat 방법이 좋음

📌주석처리한 push 방법 대신 concat방법으로 코드 변경

📌App.js

}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}
        //);
        var _contents = this.state.contents.concat(
          {id:this.max_content_id, title:_title, desc:_desc}
        )
        this.setState({
          contents:_contents
        });
        console.log(_title, _desc);
      }.bind(this)}></CreateContent>
    }

[create 기능 구현: ShouldComponentUpdate 소개]

📌push: 원본을 수정

📌concat: 원본을 수정하지 말고 복제본을 수정해서 그 복제본을 setState값으로 줌

📌concat을 사용하는 이유: 실행할 필요가 없는 부분이 실행되는 것은 불합리함. 그래서 이런 부분들이 작은 프로그램에선 상관없지만 큰 프로그램에서는 중요한 이슈가 될 수 있음. 

📌TOC 컴포넌트(부모)의 state값이 바뀌면 자식 컴포넌트들은 모두 render를 호출

📌shouldcomponentUpdate()를 사용하면 TOC컴포넌트에서 shouldcomponentUpdate함수를 실행하면 그 뒤에 TOC render도 실행.