[React] input 여러 개 다루기

input 값을 state에 넣는 방법은 앞에서 알아봤지만, input이 여러 개일 때는 어떻게 작업할지는 아직 모른다. 메서드를 여러 개 만드는 것도 하나의 방법이지만, 더 쉬운 처리가 가능하다.

바로 event 객체를 활용하는 것! e.target.name 값을 사용하면 된다.

onChange 이벤트 핸들러에서 e.target.name은 해당 인풋의 name을 가킨다. 지금은 message일 것이다. 이 값을 사용하여 state를 설정하면 쉽게 해결할 수 있다.

---

• EventPractice_input.jsx

class EventPractice_input extends Component {
  state = {
    username: '',
    message: '',
  };

  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

  handleClick = () => {
    alert(this.state.username + ': ' + this.state.message);
    this.setState({
      username: '',
      message: '',
    });
  };

  render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
        <input
          type="text"
          name="username"
          placeholder="사용자명"
          value={this.state.username}
          onChange={this.handleChange}
        />
        <input
          type="text"
          name="message"
          placeholder="아무거나 입력해 보세요"
          value={this.state.message}
          onChange={this.handleChange}
        />
        <button onClick={this.handleClick}>확인</button>
      </div>
    );
  }
}

export default EventPractice_input;

// App.jsx
import React from 'react';
// import EventPractice from './features/4_EventHandling/EventPractice';
import EventPractice_input from './features/4_EventHandling/EventPractice_input';

const App = () => {
  return <EventPractice_input />;
};

export default App;

다음 코드에서는 render 함수에서 name 값이 username인 input을 렌더링해 주었고, state 쪽에도 username이라는 값을 추가했다. 그리고 handleChange도 조금 변경됐다.

• EventPractice의 handleChange 함수
  핵심이 되는 코드는 여기!

handleChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
};

객체 안에서 key를 [ ]로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key 값으로 사용된다.

• 예시
  예를 들어 다음과 같은 객체를 만들면...

const name = 'variantKey';
const object = {
[name]: 'value'
};
결과는 다음과 같습니다.

{
'variantKey': 'value'
}