React 에서 Form 태그의 Input값 변경?

 

 

 

 

 

React를 접하기 전에, 바닐라 자바스크립트로 코딩했을때는 그냥 HTML태그를 이용해서 form을 만들고, input을 만들어서 정보를 보낼때도 되게 직관적으로 만들었었는데, React로 Input을 제어할 때는 조금 다른 방식으로 제어한다고한다.

 

그 이유에 대해서 내가 이해한 내용으로는

리액트에서는 변하는 모든 값들을 state에서 제어를 해야하기떄문에?

Input 태그의 value 값을 리액트의 state에서 추적하게끔 코드를 짜야한다는것! 그리고 어딘가에 전송 할 땐 그 추적한 text를 보내주는것이다!

 

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

다른 분 블로그에서 가져온 코드인데, 이 코드를 보고 분석해보고싶어서 가져왔다!

우선 NameForm 컴포넌트가 렌더링되면 state에 있는 value는 공백으로 초기화된다.

그리고 input form에 글자를 입력하면, onChange 이벤트가 발생하면서 handleChange 함수를 실행할 것이다.

이 함수는 setState를 이용하여 value 값을 바꿔준다. 그러므로 Input form에 text를 입력하면, 내가 입력한 text가

value이 되므로, input form에서 내가 쓴 text가 입력되는걸 관찰할 수 있다!

 

*onChange의 event.target.value 는 값을 변경했을때의 input칸에 입력된 텍스트 전체의 value이다.

나는 처음에 어떻게 쭉 이어써질까? 고민해봤었는데, 그 이유는 내가 input에 글자를 입력했을때, onChange 이벤트가 발생하고 event.target.value는 내가 방금 입력한 글자를 의미하는 줄 알았었다. 만약 그렇게되면

input에는 한글자 한글자씩 내가 방금 입력한 값만이 입력될것이다. "code"를 입력한다고 했을때,

c

o

d

e 이런식으로 내가 마지막에 볼 수 있는 글자는 "e" 가 될것이라고 생각했었다.

 

근데 여기서 의미하는 event.target.value는, onChange가 발생했을때 이미 입력된 글자+방금 입력된 글자(이벤트 발생)이렇게 해서 setState로 업데이트하는 것 같다!

 

이제 리액트를 배우는 입장으로서  이런식으로 Form 태그를 제어하는게 되게 신선한것같다. (낯설기도하고)