React - 여러개의 input 감지하기

React에서 input의 value를 감지하기 위해서는 input에 onChange 이벤트를 주고 state에 저장하는 방식을 사용해야 한다. 저장은 이벤트가 발생하는 target의 value를 저장하는데 input이 하나일 경우는 상관없지만 input이 2개 이상일 경우 각각의 input에 대해 다른 함수를 준다는 것은 너무나 귀찮은 작업이다. 개발자는 반복을 싫어하니까..

이렇게 2개의 input을 가진 로그인 페이지 예시가 있다.

원래 우리가 각 input의 value를 감지하기 위해서는 id와 pw input 각각에 함수를 걸어줘야 했다.

handleIdInput = (e) => {
  const { value } = e.target;
  this.setState({
    id: value
  })
}

handlePwInput = (e) => {
  const { value } = e.target;
  this.setState({
    pw: value
  })
}

<input
  className="userinfo"
  type="text"
  value={id}
  placeholder="전화번호, 사용자 이름 또는 이메일"
  onChange={this.handleIdInput}
/>
<input
  className="userinfo"
  type="password"
  value={pw}
  placeholder="비밀번호"
  onChange={this.handlePwInput}
/>

똑같은 기능을 하는 함수인데 두개로 분리시킨다는 것은 좋은 코드는 아니다.

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

<input
  className="userinfo"
  type="text"
  value={id}
  name="id"
  placeholder="전화번호, 사용자 이름 또는 이메일"
  onChange={this.handleUserInfo}
/>
<input
  className="userinfo"
  type="password"
  value={pw}
  name="pw"
  placeholder="비밀번호"
  onChange={this.handleUserInfo}
/>

이렇게 input의 attribute에 name 속성을 주고 state의 키와 같이 주면 target의 name을 읽어와서 결과적으로 this.state.id와 this.state.pw에 각각의 value를 저장할 수가 있다.