계산된 속성명을 이용하여 inputHandler 함수 합치기

Before 코드

<form onKeyUp={this.goPath} className="login-input-container">
            <input
              type="text"
              className="login-input input-id"
              placeholder="사용자 이메일"
              defaultValue={id}
              onChange={this.checkVal}
            />
            <input
              type="password"
              className="login-input input-password"
              placeholder="사용자 비밀번호"
              defaultValue={pwd}
              onChange={this.checkVal}
            />
          </form>

다음은 로그인 컴포넌트의 JSX 코드이다.

로그인 식별을 위해 id와 pwd의 value 값을 식별해주기 위해 state에 값을 저장하는 메서드인 checkVal를 onChange 이벤트에 바인딩해주었다.

 

두 개의 다른 Input value를 하나의 함수로 관리해주다 보니, 아래와 같이 똑같은 코드 반복되며 불필요한 조건문이 사용되어졌다.

checkVal = event => {
    let { value } = event.target;

	if(event.target.className === 'login-form') {
    	this.setState({
      		login : value,
    	});
    } else {
    	 this.setState({
      		pwd : value,
    	});
    }
  };

 

After 코드

위의 내용을 수정해주기 위해 Input 속성 중 name을 사용하기로 하였다.

 

각 Input 태그에 고유한 이름 값을 부여해 준 뒤에 해당 이름 값을 사용하여 state key에 접근하는 방식으로 코드를 다음과 깉이 리팩토링해주었다.

 <form onKeyUp={this.goPath} className="login-input-container">
            <input
              type="text"
              className="login-input input-id"
              placeholder="사용자 이메일"
              defaultValue={id}
              name="id" // 고유 이름 값 id 부여
              onChange={this.checkVal}
            />
            <input
              type="password"
              className="login-input input-password"
              placeholder="사용자 비밀번호"
              defaultValue={pwd}
              name="pwd" // 고유 이름 값 pwd 부여
              onChange={this.checkVal}
            />
          </form>

checkVal = event => {
    let { value, name } = event.target;

    this.setState({
      [name]: value, // 고유 이름 값으로 state 값 지정
    });
  };