[React18] React - Form

>> 제어컴포넌트

 - HTML 에서 <input> <textarea> <select> 와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트 합니다.

 - React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state속성에 유지되며 setState()에 의해 업데이트 됩니다.

 -React state를 single source of trust 로 만들어 두 요소를 결합 할 수 있습니다. 그러면 폼을 렌더링하는 React 컨포넌트는 폼에 발생하는 사용자 입력값을 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 제어 컴포넌트라고 합니다.

 

 - event.target은 해당 이벤트가 발생한 해당 엘리먼트를 의미한다.

class NameForm extends React.Component{
  constructor(props){
    super(props);
    this.state = { value : ''}
    this.changeValue = this.changeValue.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  } 
  
  changeValue(event){
    this.setState({ value : event.target.value});
  }
  
  formSubmit(event){
    alert('You are Submit :' + this.state.value);
    event.preventDefault();
  }
  
  render(){
    return (
      <form onSubmit={this.formSubmit}>
        <label> 
            Name : 
            <input type='text' value={this.state.value} onChange={this.changeValue} />
        </label>
        <input type='submit' value='Submit' />          
      </form>
    )
  } 
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NameForm />);

 >> 제어 컴포넌트로 사용하면 input의 값은 항상 React state에 의해 결정됩니다. 

 >> 코드를 조금 더 작성해야 한다는 의미이지만, 다른 UI엘리먼트에 input의 값을 전달하거나 다른 이벤트 핸들러에서 값을 재설정할 수 있습니다.

 

 

 

 

 

<textarea> 태그  -  React 에서 textarea는 value 어트리뷰트를 대신 사용함. 

class NameForm extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      value : 'You are so beautiful'
    }
    this.changeValue = this.changeValue.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  } 
  
  changeValue(event){
    this.setState({ value : event.target.value});
  }
  
  formSubmit(event){
    alert('You are Submit :' + this.state.value);
    event.preventDefault();
  }
  
  render(){
    return (
      <form onSubmit={this.formSubmit}>
        <label> 
            Name : 
            <textarea value={this.state.value} onChange={this.changeValue} />
        </label>
        <input type='submit' value='Submit' />          
      </form>
    )
  } 
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NameForm />);

 

 

<select> 태그 - React에서는 selected 어트리뷰트를 사용하든 대신 최상단 태그에 value 어트리뷰트를 사용함.

 >> 최상단 value에서 지정해준 값이 select 엘리먼트의 옵션에 포함되어 있지 않으면 default 값으로 지정이 되지 않음

class NameForm extends React.Component{
  constructor(props){
    super(props);
    this.state = {value: 'sosu'};
    
    this.changeValue = this.changeValue.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  } 
  
  changeValue(event){
    this.setState({ value : event.target.value});
  }
  
  formSubmit(event){
    alert('You are Submit :' + this.state.value);
    event.preventDefault();
  }
  
  render(){
    return (
      <form onSubmit={this.formSubmit}>
        <label> 
            choice your favorite food 
            <select value={this.state.value} onChange={this.changeValue}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
            <option value="sosu">sosu</option>
          </select>
        </label>
        <input type='submit' value='Submit' />          
      </form>
    )
  } 
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NameForm />);

 

 - 전반적으로 <input type='text'>, <textarea>, <select> 모두 비슷하게 동작하고, 모두 제어 컴포넌트를 구현하는데 value어트리뷰트를 허용합니다.

 <select> 태그에 multiple 옵션을 허용한다면  value 어트리뷰트에 배열을 전달할 수 있습니다.

<select multiple={true} value={['A', 'B']} >

 

<input type='file'> 태그는 읽기 전용으로, React에서는 비제어 컴포넌트로 차후에 다시 설명하겠습니다.

 

 

>> 다중 입력 제어하기

 - 여러 input 엘리먼트를 제어해야 할 때, 각 엘리먼트에 name 어트리뷰트를 추가하고 

 - event.target.name 값을 통해 핸들러가 어떤 작업을 할지 선택할 수 있게 해줍니다.

class Reservation extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      isGoing : false,
      numberOfGuest : 2
    }
    this.handleInputChange = this.handleInputChange.bind(this);
  }
  
  handleInputChange(event){
    const target = event.target;
    const value = target.type ==='checkbox' ? target.checked : target.value;
    const name = target.name;
    this.setState({ [name] : value });
  }
  
  render(){
    return(
      <form>
        <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.numberOfGuest} onChange={this.handleInputChange} />
        </label>
       </form>
    )
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Reservation />);

여기서 

this.setState({
	[name] : value
});

구문은 다음과 같습니다.

var partialState = {};
partialState[name] = value;
this.setState(partialState);