제어 컴포넌트

• <input>,<textarea>,<select>같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 state를 관리하고 업데이트함
• 입력값을 state에 저장시켜 입력값을 제어할 수 있기 때문에 아래와 같은 폼 엘리먼트를 제어 컴포넌트라고 한다.

//input
<input type="text" value={this.state.value} onChange={(e) => {this.setState({value: e.target.value})}} />

//textarea
 <textarea value={this.state.value} onChange={(e) => {this.setState({value: e.target.value})}} />
 
//select
<select value={this.state.value} onChange={this.handleChange}>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
  <option value="coconut">Coconut</option>
  <option value="mango">Mango</option>
</select>

여러 개의 input 제어하기

• 각 input 엘리먼트에 name attribute를 추가
• name과 일치하는 state 만들고 input 입력 시 setState로 변경하기

(..생략)

this.state = {
  isGoing: true,
  numberOfGuests: 2
};

(...생략)
<label>
  Is going:
  <input
    name="isGoing"
    type="checkbox"
    checked={this.state.isGoing}
    onChange={this.handleInputChange} />
</label>
<br />
<label>
  Number of guests:
  <input
    name="numberOfGuests"
    type="number"
    value={this.state.numberOfGuests}
    onChange={this.handleInputChange} />
</label>