[React] 여러개의 input 상태 관리하기

✅ 리팩토링 전

💥 문제점
이메일, 이름, 닉네임, 비밀번호를 입력하는 회원가입 페이지를 만들었는데요. 여러개의 input으로 코드가 반복되고 있어요. 가독성도 떨어지고, 유지보수도 쉽지 않겠다는 생각이 들었어요. input마다 onChange이벤트를 주고 있다는 점도 효율적이지 않구요!

const Signup = () => {
  const [email, setEmail] = useState("");
  const [name, setName] = useState("");
  const [nickname, setNickname] = useState("");
  const [password, setPassword] = useState("");

  const saveEmail = (event) => {
      setEmail(event.target.value);
  };
  const saveName = (event) => {
      setName(event.target.value);
  };
  const saveNickname = (event) => {
      setNickname(event.target.value);
  };
  const savePassword = (event) => {
      setPassword(event.target.value);
  };

  return (
      <form>
        <input value={email} onChange={saveEmail}/>
      	<input value={name} onChange={saveName}/>
      	<input value={nickname} onChange={saveNickname}/>
      	<input value={password} onChange={savePassword}/>
      </form>
  );
}

✅ 리팩토링 후

🎉 해결

• 이메일, 이름, 닉네임, 비밀번호를 객체의 형태로 함께 관리해요.
• input이 아닌 form에 onChange이벤트를 주면 e.target으로 form 안의 어떤 input에 값을 입력하는지 알 수 있어요.

const Signup = () => {
  const [inputValue, setInputValue] = useState({
    email: "",
    name: "",
    nickname: "",
    password: "",
  });

  const inputChange = (e) => {
    setInputValue({ ...inputValue, [e.target.name]: e.target.value });
  };

  const { email, name, nickname, password } = inputValue;
  
  return (
      <form onChange={inputChange}>
        <input name="email" />
      	<input name="name" />
      	<input name="nickname" />
      	<input name="password" />
      </form>
  );
}

🤔 과정
이메일을 작성하는 input란에 이메일을 작성한다고 가정해볼게요.

1. onChange 이벤트
이메일 input란에 값을 입력하면 <form>의 onChange이벤트인 inputChange함수가 실행돼요. inputChange함수에서는 setInputValue로 inputValue값을 바꿔주고 있죠. 이메일란에 작성하고 있기 때문에 inputChange함수에서 e.target.name은 email이에요.

2. 전개연산자(...)로 객체의 프로퍼티 값 재할당
그럼 inputValue의 email 프로퍼티는 email : "작성한 이메일"과 같이 사용자가 작성한 값으로 바뀌죠. inputValue는 객체이기 때문에 전개 연산자를 사용하면 해당 키에 대한 값이 재할당돼요.

3. 구조분해할당
email, name, nickname, password란 변수를 구조분해할당으로 선언해줘요. 변수 email에는 inputValue란 객체에 있는 email의 값이 들어가요. 변수 name에는 inputValue란 객체에 있는 name의 값이 들어가겠죠! 각 변수에는 input에 입력한 각 값들이 위와 같은 방식으로 저장된답니다!