[React] Update 기능 구현, 리팩토링

 

우리가 만들 Update는 이미 쓰여진 목록을 골라서 desc를 수정하는 동작을 할 것이다.

 

우선 Update 기능을 구현할 js 파일을 CreateContent 파일을 복사해서 만들고 h2 태그만 update로 바꿔주었다.

그리고 updatecontent 컴포넌트가 실행될 떄 입력 값으로 contentd id를 주입시켜줄 것이다.

 

form 제어하기

props 데이터는 read only이다. value 값으로 지정해버리면 react가 나서서 막아버린다.

그래서 입력창의 글씨를 바꾸려고 하면 오류가 난다. 

value값으로 컴포넌트 안에서 가변적인 데이터, state화를 시켜줘야 한다.

그리고 value 값을 수정할 수 있도록 input 값을 바꿨을 때 state 값을 바꿔줘야 하는데, 여기서 onChange를 써야한다.

 

 

update 하려는 목록을 클릭하면 그 목록이 입력창에 들어간다.  

오른쪽 사진은 HTML을 누른 후 update를 누른 모습이다.

desc도 동일하게 해준다

 

 

desc도 똑같이 처리해주면 onChange 함수의 중복이 생기는데 이것을 없애줄 것이다.

기능적으로는 문제없지만 그냥 보기 좋게 하기위해서!

 

여기서 최신 javascript 기능이 나오는데

[e.target.name]하면 target의 name 값이 들어온다.

 

또 여기서 뒤에있는 .bind(this)를 constructor에서 해줄 수도 있다.

 

마지막으로 update를 하려면 어디를 update를 할건지에 대한 식별자가 필요하다.

onSubmit이라는 이벤트가 발생할 때 이 컴포넌트로 들어온 onSubmit props를 실행하는데 여기다가 id 값을 준다.

 

App.js에서도 코드 수정을 해야한다.

자바스크립트의 기능 중에

Array.from(this.state.contents)을 하면 this.state.contetns를 복사한 새로운 배열이 생긴다.

concat과 같은 기능이다.

 

 

🔽 UpdateContent.js

import React, { Component } from 'react';

class UpdateContent extends Component{
    constructor(props){
      super(props);
      this.state = {
        id: this.props.data.id,
        title: this.props.data.title,
        desc: this.props.data.desc
      }
      this.inputFormHandler = this.inputFormHandler.bind(this);
    }
    inputFormHandler(e){
      this.setState({[e.target.name]:e.target.value});
    }
    render(){
      //console.log(this.props.data);
      return(
        <article>
            <h2>Update</h2>
            <form action="/create_process" method="post"
              onSubmit={function(e){
                e.preventDefault();
                //debugger;
                // CreateContent의 onSubmit을 호출
                this.props.onSubmit(
                  this.state.id,
                  this.state.title,
                  this.state.desc
                  // e.target.title.value,
                  // e.target.desc.value
                );
                //alert('submit!!');
              }.bind(this)}>
              <input
                type="hidden"
                name="id"
                value={this.state.id}
              ></input>
              <p>
                <input 
                  type="text" 
                  name="title" 
                  placeholder="title"
                  value={this.state.title}
                  onChange={this.inputFormHandler}
                ></input>
              </p>
              <p>
                <textarea 
                  name="desc" 
                  placeholder="description"
                  value={this.state.desc}
                  onChange={this.inputFormHandler}
                ></textarea>
              </p>
              <p>
                <input type="submit"></input>
              </p>
            </form>
        </article>
      );
    }
  }

  export default UpdateContent;

 

🔽 App.js (리팩토링 후)

- create와 update를 하고나면 다시 read모드로 돌아가도록 만들어주었다.

create의 경우에는 방금만든 컨텐츠를 보이도록 했다.

import './App.css';
import React, { Component } from 'react';
import TOC from "./components/TOC"
import ReadContent from "./components/ReadContent"
import CreateContent from "./components/CreateContent"
import UpdateContent from "./components/UpdateContent"
import Subject from "./components/Subject"
import Control from "./components/Control"




// 컴포넌트를 만드는 코드 (템플릿)
// 리액트의 Component라고 하는 클래스를 상속하는
// App 이라는 클래스 - render()라는 함수를 가지고 있다.
class App extends Component {
  constructor(props){
    super(props);
    // 마지막 content id 값
    this.max_content_id = 3;
    this.state = {
      mode:'read',
      selected_content_id:1,
      subject:{title:'WEB', sub:'World Wide Web!'},
      welcome:{title:'Welcome', desc:'Hello, React'},
      contents:[
        {id:1, title:'HTML', desc:'HTML is HyperText ...'},
        {id:2, title:'CSS', desc:'CSS is for design ...'},
        {id:3, title:'JavaSript', desc:'JavaSript is ...'}
      ]
    }
  }
  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;
          //_title = data.title;
          //_desc = data.desc;
          break;
        }
        i = i + 1;
    }
  }
  getContent(){
    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 _content = this.getReadContent();
      _article = <ReadContent title={_content.title} desc={_content.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;
        // 아래와같은 객체를 생성해서 contents의 끝에다가 추가한다.
        var _contents = this.state.contents.concat(
          {id:this.max_content_id, title:_title, desc:_desc}
        );
        this.setState({
          contents: _contents,
          mode: 'read',
          selected_content_id: this.max_content_id
        });
      }.bind(this)}></CreateContent>
    } else if(this.state.mode === 'update'){
        _content = this.getReadContent();
        _article = <UpdateContent data={_content} 
        onSubmit={function(_id, _title, _desc){
          var _contents = Array.from(this.state.contents);
          var i = 0;
          while(i< _contents.length){
            if(_contents[i].id === _id){
              _contents[i]={id:_id, title: _title, desc:_desc};
              break;
            }
            i = i+1
          }
          this.setState({
            contents: _contents,
            mode: 'read'
          });
        }.bind(this)}></UpdateContent>
      }
      return _article;
  }
  render(){
    return (
      <div className="App">
        <Subject 
          title={this.state.subject.title} 
          sub={this.state.subject.sub}
          onChangePage={function(){
            //alert('hihi');
            this.setState({mode:'welcome'})
          }.bind(this)}
        >
        </Subject>
        <TOC 
          onChangePage={function(id){
            //alert('hi');
            this.setState({
              mode:'read',
              selected_content_id : Number(id)
            })
        }.bind(this)}
        data={this.state.contents}
        ></TOC>
        <Control onChangeMode={function(_mode){
          this.setState({
            mode: _mode
          })
        }.bind(this)}></Control>
        {this.getContent()}
      </div>  
    );
  }
  
}

export default App;