React.js: useState()를 여러번 사용하기

지난 포스팅에서 useState();를 사용하여 상태가 바뀌는 값을 관리해주는 방법을 살펴봤습니다.
하나의 useState();는 다음과 같이 초기값과 변화할 값을 렌더링 해주는 함수의 쌍으로 이루어져 있습니다.

const [state, setState] = useState('');

자 그렇다면 로그인 메뉴처럼 관리해야할 값이 아이디, 비밀번호처럼 두개 이상일 때 useState()를 사용하려면 어떻게 해야할까요?
다음과 같은 컴포넌트를 만들어봅시다.

import React, { useState } from 'react';
const Login = () => {
  const [id, setId] = useState('');
  const [pw, setPw] = useState('');
  const onChangeId = (e) => {
    setId(e.target.value);
  }
  const onChangePw = (e) => {
    setPw(e.target.value);
  }
  return (
    <div>
      <div>
        <input value={id} onChange={onChangeId} />
        <input value={pw} onChange={onChangePw} />
      </div>
      <div>
        <div>
          <b>ID: </b> {id}
        </div>
        <div>
          <b>PW: </b> {pw}
        </div>
      </div>
    </div>
  )
export default Login;

이 때 변화하는 값은 input에 입력한 id와 pw이기 때문에 onChangeXX 함수로 input에 들어가는 값의 변화를 추적하여 id와 pw의 값으로 전달해주게 됩니다.

관리할 상태가 여러개인 경우에도 이처럼 useState Hook을 여러번 선언해서 사용하면 됩니다!