[React] React 웹앱 - UPDATE

📌 참고 📌

https://www.youtube.com/watch?v=YKdebEty6uQ&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=36

컴포넌트를 리턴값을 갖는 함수로 분리

getContent(){
  ...
  return _article;
}

render(){
  return (
    {this.getContent()}
  );
}

리턴값을 갖는 함수를 호출 후 data 로 주입

getReadContent(){
  for(let i=0; i < this.state.contents.length; i++){
    let data = this.state.contents[i];
    if(data.id === this.state.selectedId){
      // _title = data.title;
      // _desc = data.desc;
      return data;
    }
  }
}

getContent(){
  if(this.state.mode === 'update'){
    let _content = this.getReadContent();

    // _content 값을 컴포넌트 data 로 주입
    _article = <UpdateContent data={_content}
  }
}

value {props} → value {state}

props 의 데이터를 직접 value 안에 넣으면
값의 직접적인 수정이 금지되어 있고 읽어 오는 것만 가능하다.
그렇기 때문에 props 를 컴포넌트 안에서 가변적인 데이터 값을 갖는 state 화 한다.

// state 화
constructor(props){
  super(props);
  this.state = {
    // data={_content}
    id: this.props.data.id, // 식별자 역할
    title: this.props.data.title,
    desc: this.props.data.desc
  }
}
inputFormHandler(e){
  // e.target.value : input 태그의 value 값
  // e.target.name : input 태그의 name 값
  // [ ] : 구분을 위한 최신 문법
  this.setState({[e.target.name]: e.target.value}.bind(this);
}
render(){
  return (
    ...
    // 식별자 역할
    <input type="hidden" name="id" value={this.state.id}></input>
    <p>
      <input type="text"
        name="title" 
        placeholder="title" 
        // props → state
        value={this.state.title}

        // 이벤트 함수(onChange)을 통해 내용이 변경되고
      	// setState 으로 인해 state 값이 동적으로 바뀐다. 
        // = state 와 동기화
      	onChange={this.inputFormHandler}>
      </input>
    </p>
  );
}

React 에서의 textarea

html 에서는 textarea value 값을 태그 사이
<textarea>value</textarea> 에 넣었지만,
react 에서는 textarea 값을 value 안에 넣어야 한다.

<p>
  <textarea name="desc" 
    placeholder="desc"
    value={this.state.desc}
    onChange={this.inputFormHandler}>
  </textarea>
</p>