[React] 여러 개의 input의 onChange 한 번에 관리하기

[React] 여러 개의 input의 onChange 한 번에 관리하기

 

로그인, 회원가입 페이지를 구현하면 여러 개의 input을 관리해야 한다.

회원가입 페이지에서 아이디, 비밀번호, 비밀번호 확인, 닉네임, ... 등등 여러 개의 input을 입력받는다고 생각할 때,

이를 모두 다른 state로 관리하는 것은 생각만 해도 코드가 지저분하다.

 

// BEFORE

function App() {
  const [id, setId] = useState('');
  const [pw1, setPw1] = useState('');
  const [pw2, setPw2] = useState('');
  const [nickname, setNickname] = useState('');

  const handleIdChange = (e) => {
    setPerson({ ...person, id: e.target.value });
  };
  const handlePw1Change = (e) => {
    setPerson({ ...person, pw1: e.target.value });
  };
  const handlePw2Change = (e) => {
    setPerson({ ...person, pw2: e.target.value });
  };
  const handleNicknameChange = (e) => {
    setPerson({ ...person, nickname: e.target.value });
  };

  return (
    <div className="App">
      <section>
        <div>
          <label>ID</label>
          <input
            value={id}
            onChange={handleIdChange}>  
          </input>
        </div>
        <div>
          <label>PW1</label>
          <input
            value={pw1}
            onChange={handlePw1Change}>  
          </input>
        </div>
        <div>
          <label>PW2</label>
          <input
            value={pw2}
            onChange={handlePw2Change}>  
          </input>
        </div>
        <div>
          <label>Nickname</label>
          <input
            value={nickname}
            onChange={handleNicknameChange}>  
          </input>
        </div>
      </section>
    </div>
  );
}

export default App;

 

하나의 state를 객체로 사용하면 이를 해결할 수 있다.

input마다 객체의 property key에 맞는 name 프로퍼티를 넣어주고,

onChange에 넘겨줄 함수는 다음과 같이 범용성이 있도록 수정한다.

 

// AFTER

function App() {
  // object 하나를 state로 사용
  const [person, setPerson] = useState({
    id: '',
    pw1: '',
    pw2: '',
    nickname: '',
  });

  // 통합된 input change handling function
  const handleInputChange = (e) => {
    setPerson({ ...person, [e.target.name]: e.target.value });
  };

  return (
    <div className="App">
      <section>
        <div>
          <label>ID</label>
          <input
            name="id"
            value={person.id}
            onChange={handleInputChange}>  
          </input>
        </div>
        <div>
          <label>PW1</label>
          <input
            name="pw1"
            value={person.pw1}
            onChange={handleInputChange}>  
          </input>
        </div>
        <div>
          <label>PW2</label>
          <input
            name="pw2"
            value={person.pw2}
            onChange={handleInputChange}>  
          </input>
        </div>
        <div>
          <label>Nickname</label>
          <input
            name="nickname"
            value={person.nickname}
            onChange={handleInputChange}>  
          </input>
        </div>
      </section>
    </div>
  );
}

export default App;

 

[e.target.name]에서 대괄호의 정체는 ECMAScript 2015(ES6)에서 추가된 계산된 프로퍼티 명(computed property name)이다.

대괄호에 식별자를 넣으면 해당 키는 식별자가 가리키는 값으로 변환된다.

// 계산된 프로퍼티 명

let i = 0
let a = {
  ['foo' + ++i]: i,
  ['foo' + ++i]: i,
  ['foo' + ++i]: i
}

console.log(a.foo1) // 1
console.log(a.foo2) // 2
console.log(a.foo3) // 3

역시 React의 근간은 JavaScript임을 매번 느끼고 있다.

기초를 탄탄히!! 💪

---

References

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names