[React] Update & Delete 기능 구현 - form 작업

Study. React

Update & Delete 기능 구현

 

💡 아까 실행했을 때 에러가 나서 검색해서 고쳐도 해결이 안되길래 결국 이고잉님 코드 변경 사항에서 일일이 확인해보니까 내 코드에 오타가 있었다..   =을 -라고 적었던 것..

아무튼 이제 오류가 나지 않는다 ㅎㅅㅎ

 

[update 구현: from 작업]

📌update 버튼을 클릭했을 때 title에 원본이 남아있게 하기

📌input 태그 안에서 value={this.props.data.title} 이렇게 title 안에 저장된 값이 남아있게 함

📌UpdateContent.js

import React, { Component } from 'react';

class UpdateContent extends Component{
    render(){
      console.log(this.props.date);
      console.log('UpdateContent render');
      return(
        <article>
          <h2>Update</h2>
          <form action="/create_process" method="post" 
            onSubmit={function(e){
            e.preventDefault();
            this.props.onSubmit(
              e.target.title.value,
              e.target.desc.value
            );
          }.bind(this)}>
            <p>
              <input 
              type="text" 
              name="title" 
              placeholder="title"
              value={this.props.data.title}
              onChange={function(e){
                console.log(e.target.value);
              }.bind(this)}
              ></input>
              </p>
            <p>
              <textarea name="desc" placeholder="description"></textarea>
            </p>
            <p>
              <input type="submit"></input>
            </p>
          </form>
        </article>
      );
    }
  }
  export default UpdateContent;

📌컴포넌트 안에서 state화(가변적인 데이터)를 시켜주기 위해서 이 코드를 render() 함수 위에 추가

constructor(props){
    super(props);
    this.state = {
      title:this.props.data.title
    }
  }

📌추가하고 input태그 안에서도 props.data에서 state로 바꿔줌

<p>
  <input 
    type="text" 
    name="title" 
    placeholder="title"
    value={this.state.title}
    }.bind(this)}
  ></input>
</p>

 

📌그리고 input의 값을 바꿨을 때 state값을 바꿔줘야 ReadOnly 로 되지 않는다. 그럴려면 input 안에서 onChange를 써줘야 함. 그러면 이벤트가 발생할 때마다 input 태그의 value 값이 출력되도록 하였음

<p>
  <input 
    type="text" 
    name="title" 
    placeholder="title"
    value={this.props.data.title}
    onChange={function(e){
    console.log(e.target.value);
    }.bind(this)}
  ></input>
  </p>
 <p>

📌그리고 실행해서 title에 값을 쓰면 하나씩만 추가되는 것을 알 수 있음

 

📌그래서 한 글자씩 바뀌는 것을 setState를 이용해 컴포넌트 state에 동기화 시켜준다.

onChange={function(e){
  console.log(e.target.value);
  this.setState({title:e.target.value})
}.bind(this)}

 

📌그러면 이렇게 정상적으로 동기화되는 것을 알 수 있음

 

 

📌그 다음은 description도 동적으로 바뀌도록 해주겠음

📌constructor에 이렇게 코드를 추가함

constructor(props){
    super(props);
    this.state = {
      title:this.props.data.title,
      desc:this.props.data.desc
    }
  }

📌그리고 textarea 태그에 state 화를 시켜줌

📌이때 textarea 안에

<textarea name="desc" placeholder="description">{this.state.desc}</textarea>

이렇게 추가하면 defaultValue나 value로 쓰라고 에러가 남

즉, React 에서 짜는 html 코드는 html이 아니라 유사 html임으로 우리가 아는 html과 동일하게 코드를 짜면 안된다.

 

어떻게 해줘야 하는가?

이렇게 value 값으로 줘야 한다.

<textarea name="desc" placeholder="description" value={this.state.desc}></textarea>

이렇게!

 

📌그럼 이렇게 원본이 나타난다.

📌그리고 이제 이걸 수정해서 update해주는 작업을 해보았다.

📌onChange를 추가해주고 수정까지 되는 작업을 해줬다.

<p>
  <textarea 
  onChange={function(e){
  this.setState({desc:e.target.value})
  }.bind(this)}
  name="desc" 
  placeholder="description" 
  value={this.state.desc}></textarea>]
</p>

 

📌일단 inputFormHandler함수를 만들어서 input태그와 textarea에 들어가는 것의 중복을 제거하고 코드를 더 깔끔하게 해준다.

 

inputFormHandler(e){
    this.setState({title:e.target.value});
  }

<p>
  <input 
  type="text" 
  name="title" 
  placeholder="title"
  value={this.state.title}
  onChange={this.inputFormHandler.bind(this)}
  ></input>
</p>

 

 

📌이때 둘다 inputFormHandler 를 쓰면 둘다 같이 바뀌기 때문에 title값의 다르게 해준다.

자바스크립트의 문법을 이용해서 name값을 가져온다.

inputFormHandler(e){
    this.setState({[e.target.name]:e.target.value});
  }

그럼 이렇게 둘다 수정이 잘 된다.

📌그 후에 bind(this)를 반복적으로 하는게 번거로운데 이걸 간결하게 바꿔버린다.

constructor에

this.inputFormHandler = this.inputFormHandler.bind(this);

이렇게 추가하기

그럼 bind가 된 것을 다시 inputFormHandler로 넣어주기 때문에 밑에서 다시 써줄 필요가 없다.

constructor(props){
    super(props);
    this.state = {
      title:this.props.data.title,
      desc:this.props.data.desc
    }
    this.inputFormHandler = this.inputFormHandler.bind(this);
  }

 

📌그 후에 밑에 input태그와 textarea태그에서 해줬던 bind(this)는 삭제해도 무방하다.

<p>
  <input 
  type="text" 
  name="title" 
  placeholder="title"
  value={this.state.title}
  onChange={this.inputFormHandler}
  ></input>
</p>
<p>
  <textarea 
  onChange={this.inputFormHandler}
  name="desc" 
  placeholder="description" 
  value={this.state.desc}></textarea>]
</p>

📌이런 식으로 코드를 깔끔하게 만들어가는 '리팩토링'을 자주 해주어야 함

 

📎강의: https://opentutorials.org/module/4058/24861