[React.js] React Forms

🤷 React.js 프로그래밍을 위한 다양한 스킬들 - 4

지난 포스팅에서는, PropTypes라는 props의 type을 검증하는 라이브러리에 대해 공부했다.

 

이번에는 React Form에 관해 공부한 내용이다.

기존 React를 쓰지 않은 환경에서는, HTML에 <form> 태그내 <input>, <select> 등 태그에 정보를 입력하였다.

또한, 이 정보를 <button>을 통해 Submit하여 업데이트 처리했지만, 이는 React에서 선호하는 방법이 아니다.

 

하지만, React Form에선 매 입력/삭제의 순간순간을 서버에서 확인에서 확인하고 스크린을 업데이트 해야하며, 그렇기에 Form과 rest App들이 실시간 연동되어있는게 이상적이다.

 

---

📒 Event Listener : onChange

 

지금까지 <input>에 종종 적용해온 onChange이다. render()의 JSX 태그 내, onChange={this.function} 으로 추가한다.

import React from 'react';
import ReactDOM from 'react-dom';

export class Input extends React.Component {
  // 3. state 초기화, this bind처리
  constructor(props) {
    super(props);
    this.state = { userInput: '' };
    this.handleUserInput = this.handleUserInput.bind(this)
  }

  // 2. handleUserInput(e) 이벤트 핸들러
  handleUserInput(e) {
    this.setState({
      userInput: e.target.value
    })
  }
  
  render() {
    return (
      <div>
      	// 1. onChange 이벤트리스너 / 4. value={this.state.userInput}
        <input type="text" value={this.state.userInput} onChange={this.handleUserInput} />
        <h1>{this.state.userInput}</h1>
      </div>
    );
  }
}

ReactDOM.render(
	<Input />,
	document.getElementById('app')
);

1. render()에 onChange 이벤트 리스너를 추가한다. 여기에, 추후 만들 this.handleUserInput 핸들러를 할당한다.
2. handleUserInput(e) 이벤트 핸들러를 추가한다. userInput state를 this.setState()로 변경해준다.
3. state 초기화(this.state) 및 this.handleUserInput를 Input 컴포넌트와 .bind 처리한다.
4. 마지막으로, <input>의 value 값과 <h1>의 표현내용을 this.state.userInput 과 연결시켜주면 된다.

---

📒 Controlled vs Uncontrolled

 

컴포넌트를 구분하는 (클래스형 vs 함수형), (stateful vs stateless) 외 다른 기준이다. React Forms 구분시 적용된다.

• Uncontrolled Component: 초기값을 유지함. 이를 메모리에 기억하면서 정보의 변화를 Tracking 한다.
• Controlled Component: 초기값이 없음. state를 가지고 있지 않아 다른 컴포넌트의 props에 의해 제어된다. React 컴포넌트의 대부분은 Controlled에 해당된다.

---

React의 정보인지 및 업데이트의 개념은 HTML의 submit과 현저히 달랐다.

글자(Character) 하나하나의 입력/삭제과정을 실시간으로 Tracking 해야하며, 이를 state/props 처리하는 법을 익혔다.