Update

이제 업데이트 기능을 구현해보자.

form 기능이 이미 구현되어 있는 <CreateArti> 컴포넌트를 만들고 <UpdateArti> 를 사용하는 App.js 파일에 <UpdateArti> 컴포넌트 디렉토리에 있는 모듈을 읽어오도록 추가한다.

• App.js

import UpdateArti from "./component/UpdateArti";

그리고 현재의 <App> 컴포넌트의 state 값 mode 가 바뀌면 <UpdateArti> 컴포넌트를 만들어 준다.

• App.js > else if(mode === ???) update 구문도 추가

} else if(this.state.mode === 'upadete'){
  _article = <UpdateArti data={_content} onSubmit={function(_title, _desc){
    ...
  }.bind(this)>}></UpdateArti>

---

리팩토링

잠깐 지금까지 작성한 코드를 되돌아 보면 render() 함수가 너무 복잡한 것을 확인할 수 있다.

그래서 render 함수 안의 코드를 새로운 함수로 쪼개서 분리시키자.

• App.js > getContent 생성

getContent(){
  // render() 함수 내용
  return _article;
}
render(){
  // 생략
  {this.getContent()}
}

이전과 똑같은 결과를 보여주는 코드지만 훨씬 더 보기 좋은 코드로 만들었다.

이제 <UpdateArti> 컴포넌트가 실행될 때 입력 값으로 현재 선택된 id 에 해당되는 contents 를 <UpdateArti> 컴포넌트에 주입시켜야 한다.

이를 위해서 contents 에서 selected_id 와 같은 원소를 찾기 위해 getReadContent() 라는 이름으로 배열을 받는 함수를 만들고 data 를 리턴한다.

• App.js > getReadContent 생성

getReadContent(){
  // render() 함수 내용
  var i = 0;
  var _title, _desc, _article = null;
  while(i < this.state.contents.lenght){
    var data = this.state.contents[i];
    if(data.id === this.state.selected_content_id){
      _title = data.title;
      _desc = data.desc;
      return data;
      break;
    }
    i = i + 1;
  }
}

이렇게 생성한 함수를 _content 변수에 주입한다.

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

else if(this.state.mode === 'read|update'){
  var _content = this.getReadContent();
  _article = <ReadArti title={_content.title} desc={_content.desc}></ReadContent>
}

---

else if(this.state.mode === 'update'){
  var _content = this.getReadContent();
  _article = <UpdateArti = {_content}
  	...
  }.bind(this)></UpdateArti>
}

똑같이 동작하지만 getReadContent() 함수를 통해 깔끔한 형태로 리팩토링 된 상태다.

그리고 update 부분에서 _content 값을 <UpdateArti> 컴포넌트의 데이터로 주입이 되는지를 확인해보자.

• UpdateArti.js

import React...;
// skip
class UpdateArit extends Component{
  render(){
    console.log(this.props.data); // 속성중 데이터 호출
    ...
  }
}

• 결과
  

<Navi> 리스트 중 Update를 클릭하면 id, title, desc 값이 잘 들어온 것을 확인할 수 있다.