[React] React Forms

해당 포스트는 코드아카데미의 React 101 강의의 필기입니다.

Better Form

👀 자바스크립트에서 form이 작동하는 방식
: 입력하는 동안은 서버에 전송이 되지 않고 있다가, submit 버튼을 누르는 순간 서버에 전송된다
→ ⛔️ 이는 자바스크립트에서도, 리액트에서도 좋은 방식은 아님!

ex)
만약에 form에 입력하는 동안 form도 아니고 server도 아닌 제 3의 요소가 이 값을 요청한다면? → form과 server가 알고 있는 값이 다르므로 혼동이 생겨남!

✨ 우리가 원하는 것은 form에 변화가 생기는 즉시 server도 알아채는 것

How?

1. state를 추가해준다
   const [userInput, setUserInput] = useState('')

2. input에 onChange 이벤트 리스너를 달아준다

3. onChange에 실행시킬 함수를 추가한다
   onChange={handleUserInput}

4. handleUserInput 함수를 정의한다
   setUserInput(e.target.value)

5. input의 value 속성을 정의한다.
   value={userInput}

6. 원하는 제 3의 요소에도 이를 전달해준다.
   <h1>{userInput}</h1>

클래스 컴포넌트의 경우

export class Input extends React.Component {
  constructor(props) {
    super(props);
    this.state = { userInput: '' };
    this.handleUserInput = this.handleUserInput.bind(this);
  }

  handleUserInput(e) {
    this.setState({
    userInput: e.target.value
    });
  }

  render() {
    return (
      <div>
        <input type="text" onChange={this.handleUserInput} value={this.state.userInput} />
        <h1>{this.state.userInput}</h1>
      </div>
    );
  }
}

Controlled vs Uncontrolled

Uncontrolled Component
: 본인의 internal state를 알아서 가지고 있는 컴포넌트
ex) <input />의 경우 value 값에 접근할 경우 항상 자신의 up-to-date한 value를 가지고 있음

Controlled Component
: 본인의 internal state를 관리하지 않는 컴포넌트. 그렇기 때문에 컴포넌트에 대한 어떠한 정보에 접근하고 싶다면 일부러 누가 지정해주어야함 (props 등을 통해)

대부분의 리액트 컴포넌트들은 controlled이다.

그러므로 우리는 <input />도 controlled로 만들어 주는 것이 더 리액트스럽게 코딩하는 방법
→ ✨ value 속성을 지정해주면 controlled component로 변화한다!