React input상태 관리

input 다루기

  import React, { Component } from 'react';

  class PhoneForm extends Component {
    state = {
      name: ''
    }
    handleChange = (e) => {
      this.setState({
        name: e.target.value
      })
    }
    render() {
      return (
        <form>
          <input
            placeholder="이름"
            value={this.state.name}
            onChange={this.handleChange}
          />
          <div>{this.state.name}</div>
        </form>
      );
    }
  }

  export default PhoneForm;

• onChange 이벤트가 발생하면, e.target.value 값을 통하여 이벤트 객체에 담겨있는 현재의 텍스트 값을 읽어올 수 있음

  import React, { Component } from 'react';

  class PhoneForm extends Component {
    state = {
      name: '',
      phone: ''
    }
    handleChange = (e) => {
      this.setState({
        [e.target.name]: e.target.value
      });
    }
    render() {
      return (
        <form>
          <input
            placeholder="이름"
            value={this.state.name}
            onChange={this.handleChange}
            name="name"
          />
          <input
            placeholder="전화번호"
            value={this.state.phone}
            onChange={this.handleChange}
            name="phone"
          />
          <div>{this.state.name} {this.state.phone}</div>
        </form>
      );
    }
  }

  export default PhoneForm;

• input의 name 속성을 이용해 input을 구분
• name값은 event.target.name 을 통해서 조회
• setState 내부에서 사용된 문법은 Computed property names 문법

부모 컴포넌트에게 정보 전달하기

• 부모 컴포넌트에서 메소드를 만들고, 이 메소드를 자식에게 전달한 다음에 자식 내부에서 호출하는 방식을 사용
• PhoneForm 쪽에서 버튼을 만들어서 submit 이 발생하면 props 로 받은 함수를 호출하여 App 에서 파라미터로 받은 값을 사용 할 수 있도록 함

  import React, { Component } from 'react';
  import PhoneForm from './components/PhoneForm';

  class App extends Component {
    handleCreate = (data) => {
      console.log(data);
    }
    render() {
      return (
        <div>
          <PhoneForm
            onCreate={this.handleCreate}
          />
        </div>
      );
    }
  }

  export default App;

  import React, { Component } from 'react';

  class PhoneForm extends Component {
    state = {
      name: '',
      phone: ''
    }
    handleChange = (e) => {
      this.setState({
        [e.target.name]: e.target.value
      })
    }
    handleSubmit = (e) => {
      // 페이지 리로딩 방지
      e.preventDefault();
      // 상태값을 onCreate 를 통하여 부모에게 전달
      this.props.onCreate(this.state);
      // 상태 초기화
      this.setState({
        name: '',
        phone: ''
      })
    }
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
          <input
            placeholder="이름"
            value={this.state.name}
            onChange={this.handleChange}
            name="name"
          />
          <input
            placeholder="전화번호"
            value={this.state.phone}
            onChange={this.handleChange}
            name="phone"
          />
          <button type="submit">등록</button>
        </form>
      );
    }
  }

  export default PhoneForm;

• e.preventDefault() 함수는 원래 이벤트가 해야 하는 작업을 방지시킴
• 원래는 form에서 submit이 발생하면 페이지를 다시 불러오게 되는데 그렇게 되면 지니고있는 상태를 잃어버리기 때문에 함수를 통해 방지
• 그 다음에는 props로 받은 onCreate 함수를 호출하고, 상태값을 초기화
• render 부분에서는 submit 버튼을 만들고, form 부분에 onSubmit 이벤트를 등록