저번에 <CreateArti> 에서 this.props.onSubmit() 을 호출하면 App.js 에 있는

_article =<CreateArti onSubmit={function(_title, desc_{
  console.log(_title, _desc);
  }.bind(this)></CreateArti>
}

위 코드 영역이 실행됬었다.

이제 위에 onSubmit 이벤트가 발생했을때 <App> 컴퍼넌트의 contents[...] 끝에 얻어온 데이터를 추가해보자.

---

id 값

우선 기존에 추가되어 있었던 데이터들의 id 값보다 1 더 큰 id 값을 만들어야 한다.

이 값을 매번 찾는 방법도 있겠지만 this.max_content_id 에 지정하도록 한다.

this.max_content_id 값은 마지막 contents 의 id 와 같아야 한다.

• App.js

class App extends Component{
  constructor(props){
    super(props);
    this.max_conent_id = 3;
    this.state = { ...
}

• state 가 값으로 하지 않는 이유는 max_content_id 는 어떤 데이터를 push 할 때 id 값을 지정하기 위해 사용할 정보일 뿐 UI에 영향을 줄 이유가 없기 때문이다.
• state 값으로 지정하게 된다면 불필요한 렌더링이 발생하게 된다.

---

<CreateArti> 컴포넌트의 onSubmit 이 실행될 때마다 기존의 max_content_id 의 값을 1씩 증가시키자

그리고 id 값은 max_content_id 이고 title 값과 desc 의 값은 onSubmit 이벤트로 부터 받아온 data 객체를 생성해서 contents 의 끝에 추가한다.

이때 this.state.contents.push() 처럼 state의 값을 직접 수정하면 리액트가 변경된것을 알 수 없다.

this.state.content 의 값을 바꿨기 때문에 this.setState를 통해 바뀐 값을 변경할 수 있다.

• App.js > else if(mode === create) 영역

_article = <CreateArti onSubmit={function(_title, desc){
  this.max_content_id = this.max_content_id + 1;
  this.setState({
    contents: {id:this.max_content_id, title:_title, desc:_desc}
  });
  console.log(_title, _desc);
}.bind(this)}></CreateArti>

코드 작성 후 실행하면 정상적으로 끝에 추가가 되고 id 값은 4, 추가된 data 에 맞게 화면도 올바르게 렌더가 된 것을 확인할 수 있다.

하지만 이 방식은 나중에 리액트의 어떤 성능을을 개선하려고 할 때 굉장히 까다롭거나 불가능한 상황이 생길 수 있다.

좀 더 좋은 방법은 concat() 이라는 것을 사용하는 것이다.

---

concat()

console 창을 통해 확인해보자.

arr 배열에 데이터를 추가하는 방법은 2가지가 있다.

• push

var arr = [1,2];
< undefined
arr.push(3)
< 3
arr
< (3) [1, 2, 3]

---

위 arr 은 원본 배열의 값이 바뀌는 상태가 된다.
값이 바뀌는 대상은 기존에 있던 원본 데이터 1, 2 가 바뀐단 뜻이다.

• concat

var arr_c = [1,2];
< undefined
var result = arr2.concat(3);
< undefined
result
< (3) [1, 2, 3]

---

하지만 concat 의 경우 원본을 바꾸지 않는다
arr_c 는 원본배열 concat() 을 실행하면 원본을 변경한 새로운 배열이 리턴된다.

staet에 값을 추가할 때는 push() 와 같이 원본 데이터를 변경하는 것을 사용하지 않는다.

concat() 처럼 오리지널 데이터를 변경하지 않고 새로운 데이터를 추가하는 방식을 사용해야 한다.

오리지널 데이터를 변경시키는 this.state.contents.push()로 작성된 코드를

this.state.contents.concat()로 변경한다.

이 리턴값을 _content 라고 하는 변수에 담고 이렇게 새롭게 만들어진 데이터를 setState() 의 값으로 교체한다.

• App.js > else if(mode === "create") 영역

_article = <CreateArti onSubmit={function(_title, _desc){
  this.max_content_id = this.max_content_id + 1;
  // push 방식은 원본을 건드리므로 사용하지 않는다
  // this.state.content.push(
  //   {id : this.max_content_id:id, title:_title, desc:_desc}
  // );
  var _contents = this.state.contents.concat(
    {id:this.max_content_id, title:_title, desc:_desc}
  );
  this.setState({
    content: _contents
  });
  console.log(_title, _desc);
}.bind(this)}></CreateArti>

• 결과
  

정상적으로 동작하는 것을 확인할 수 있다.

CRUD : Create Read Update Delete 에서 React 를 이용해 create를 완료했다