React - 폼 이벤트 핸들러, controlled component, uncontrolled component

아래 4가지를 기억하자. 

1. 컴포넌트는 상태와 속성을 이용해 데이터를 다룬다.

2. 컴포넌트는 자바스크립트 클래스이기 때문에 이벤트에 반응하기 위한 생명주기 메서드들은 물론 다른 작업을 처리하기 위한
   사용자 정의 클래스 메서드를 선언할 수 있다.

3. 보통의 DOM 요소와 마찬가지로 리액트 컴포넌트 내에서도 클릭이나 입력값 변경 등과 같은 이벤트를 리스닝할 수 있다. 

4. 부모 컴포넌트는 자식 컴포넌트의 속성으로 콜백 메서드를 전달해서 컴포넌트 간의 통신을 지원할 수 있다.

예제코드를 살펴보자. 

import React from "react";
import { render } from "react-dom";
import PropTypes from "prop-types";
 
import "./styles.css";
 
class CreatePost extends React.Component {
  constructor(props) {
    super(props);
    // 상태 설정
    this.state = {
      content: "",
      valid: false
    };
    // 이벤트 핸들러 설정
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handlePostChange = this.handlePostChange.bind(this);
  }
 
  handleSubmit() {
    if (!this.state.valid) {
      alert("입력창의 최대길이를 확인해 주세요.");
      return;
    }
    const newPost = {
      content: this.state.content
    };
    console.log("submit");
    console.log(this.state);
  }
  handlePostChange(e) {
    const content = e.target.value;
    this.setState(() => {
      // 새로운 값으로 상태를 갱신한다.
      return {
        content,
        valid: content.trim().length <= 20
      };
    });
    console.log("Handling an update to the post body! ==>" + e.target.value);
  }
 
  render() {
    return (
      <div className="create-post">
        <div>
          <textarea
            value={this.state.content} // 컴포넌트의 상태로부터 새 값을 설정한다. 이걸 생략하면 제어되지 않는 컴포넌트가된다.
            onChange={this.handlePostChange}
            placeholder="What's on your mind?"
          />
          <span class="alert-font">최대 20자</span>
        </div>
        <div>
          <button onClick={this.handleSubmit}>Post</button>
        </div>
      </div>
    );
  }
}
 
CreatePost.PropTypes = {
  content: PropTypes.string,
  valid: PropTypes.bool
};
 
render(<CreatePost />, document.getElementById("root"));
 

위 코드의 38번째 라인을 살펴보면 컴포넌트의 상태 갱신을 통한 새로운 값을 textarea 요소에 value 로 넣어주고 있다. 

이를 통해 모든 과정을 컴포넌트의 범위로 국한하고 단일화된 상태 관리 체계를 구축하게 되는 것이다. - controlled component 

38번째 라인을 제거하게 되면 '제어되지 않는 컴포넌트 (uncontrolled component)' 가 되며 이는 자신의 내부 상태를 직접 관리하고, 

컴포넌트 안에 데이터에 대한 접근 및 상태 제어를 관리하는 별개의 공간을 생성하게 된다. 

controlled component 와 uncontrolled component 중 무엇을 사용해야 할까?

React는 controlled component를 사용하여 form을 구현할 때 권장되는 표준이다. 

반응형으로 form의 요소들의 변화를 감지하여 무언가를 통제해야 하는 경우 적당하다. 

무조건 controlled component가 좋은 것은 아니며 우리가 만들려고 하는 것이 어떤 목적을 가지고 있는지에 대한 상황에 따라 

uncontrolled component를 사용해도 된다. (ex. 매우 간단한 form 만 작성하는 경우)