[React]input 다루기 - 1

in Study on react


input을 통해 받은 입력을 state에 저장하는 방법에 대해 알아보겠습니다.

input 다루기

src 디렉토리 내부에 components라는 디렉토리를 만들고, 그안에 PhoneForm.js라는 파일을 만들고 다음 코드를 입력합니다.

// file: src/components/PhoneForm.js
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값을 통하여 이벤트 객체에 담겨있는 현재의 텍스트 값을 읽어올 수 있습니다.

App.js 도 수정을 해줍니다.

// file: src/App.js
import React, { Component } from 'react';
import PhoneForm from './components/PhoneForm';


class App extends Component {
  render() {
    return (
      <div>
        <PhoneForm />
      </div>
    );
  }
}

export default App;

만약 전화번호를 추가해야 한다면 어떻게 할까요?

input이 여러개 일때는 다음과 같이 코드를 작성합니다.

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속성을 사용해서 각각의 값을 구분할 수 있습니다. 이 name값은 event.target.name을 통해서 조회할 수 있습니다.

setState 내부에 사용된 문법은 Computed property names라는 문법입니다.