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

React에서 여러 개의 input을 관리하는 경우, 하나의 state로 관리하면 편하게 관리할 수 있다.

1. html 작성

input으로 email, password, displayName을 입력받는다.

input 하나당 여러개의 attribute가 있는데 각각 다른 기능을 가진다.

attribute	기능
type	입력 형식을 제한한다
id	label과 연결한다 (label의 for - input의 id 가 같아야 한다)
name	여러 개의 input 입력값에 이름을 지정해 관리한다
value	입력값을 관리한다
onChange	input에 입력된 값의 변화를 감지해 실행한다
required	꼭 필요한 값을 설정한다(값이 없으면 form 제출 안됨)

 

import React, { useState } from "react";
 
function Signup() {
 
  return (
    <form onSubmit={handleSubmit}>
      <div className="modalFormDiv">
        <label htmlFor="email">이메일</label>
        <input
          type="email" // 입력형식제한
          id="email" // label의 for 사용하기 위한 것
          name="email" // input 여러개 관리 위해 지정
          value={email}
          onChange={onChange}
          required
        />
      </div>
      <div className="modalFormDiv">
        <label htmlFor="password">비밀번호</label>
        <input
          type="password"
          id="password"
          name="password"
          value={password}
          onChange={onChange}
          required
        />
      </div>
      <div className="modalFormDiv">
        <label htmlFor="displayName">별명</label>
        <input
          id="displayName"
          name="displayName"
          value={displayName}
          onChange={onChange}
          required
        />
      </div>
      <div className="modalBtnDiv">
        <input
          type="submit"
          value="회원가입"
        />
      </div>
    </form>
}
 
export default Signup;
 

 

2. state 만들기

input에 설정된 name으로 이벤트가 발생했을 때 변경된 값을 쉽게 관리할 수 있다.

const [inputs, setInputs] = useState({
  email: "",
  password: "",
  passwordConfirm: "",
  displayName: "",
});
 
const { email, password, passwordConfirm, displayName } = inputs; // 비구조화 할당

useState에서는 각각의 값을 따로 관리하지 않고 inputs라는 객체를 관리한다.

비구조화 할당으로 inputs에 있는 여러 값을 추출해 상수로 선언한다.

 

3. onChange 함수 만들기

여러 input에서 동일하게 사용해줄 onChange 함수를 작성한다.

function onChange(e) {
  const { value, name } = e.target;
  setInputs({
    ...inputs,
    [name]: value,
  });
}

e를 통해 변화가 일어난 input의 정보를 받을 수 있게된다. 

value와 name을 사용해 바로 setInputs에서 새로운 값으로 수정할 수 있다.

 

4. onSubmit 함수 만들기

onSubmit함수로 원하는 작업을 하도록 작성한다.

e.target 등으로 입력값을 찾지 않고 바로 email, password, displayName을 가져와서 사용할 수 있다.

async function handleSubmit(e) {
  e.preventDefault();
  await createUser(email, password, displayName);
}

 

---

 

여러개의 input을 하나의 state로 관리했을 때의 장점

 

state를 만들지 않았다면 handleSubmit에서 입력값을 매번 가져와야 원하는 작업을 할 수 있다.

async function handleSubmit(e) {
  e.preventDefault();
  // state를 만들지 않았다면 입력값을 가져와야한다.
  const email = e.target[0].value;
  const password = e.target[1].value;
  const displayName = e.target[2].value;
  await createUser(email, password, displayName);
}

 

 

여러 개의 state를 만들었다면 onChange를 따로 만들어주거나, 어떤 값에 변화가 있었는지 확인해야 한다.

const [email, setEmail] = useState(null);
const [password, setPassword] = useState(null);
const [displayName, setDisplayName] = useState(null);
 
// 여러개의 함수를 만들거나...
function onChangeEmail(e) {
  const value = e.target.value;
  setEmail(value);
}// onChangePassword, onChangeDisplayName 필요함
 
// 하나의 onChange을 사용한다면 어느 input에 입력했는지 확인해야 한다
function onChange(e) {
  const { value, name } = e.target;
  switch (name) {
    case "email": 
      setEmail(value);
      return;
    case "password": 
      setPassword(value);
      return;
    case "displayName": 
      setDisplayName(value);
      return;
  }
}

참고한 사이트

https://react.vlpt.us/basic/09-multiple-inputs.html

9. 여러개의 input 상태 관리하기 · GitBook