여러 인풋 관리란?

큰 틀로 보게 되면 회원가입 페이지라던가 예약 하는 페이지들을 보게 되면 인풋이나 폼 처럼 값을 입력하는 창들이 엄청나게 많이 있습니다! 그럴때 인풋을 관리하기에 어떤게 코드적으로 효율적일까에 대해 얘기를 해볼려고 합니다!

State 를 하나로!

보통 아래처럼 state를 여러개를 선언해 값을 관리를 하게 될것이다.

const [ id , setId] = useState('')
const [ pw , setPw] = useState('')
const [ email , setEmail] = useState('')

하지만 인풋을 관리해야할 state가 더 많아지면 많아질수록 일일히 선언을 해줘야하는 번거로움이 있는데
이거를 하나의 state에 객체형으로 저장이 가능하다 예시는 아래로!

const [inputs, setInputs] = useState({
  id: '',
  pw: '',
  email: '',
 });

이런식으로 inputs라는 스테이트 값에 하나로 담아서 관리르 할수 있습니다.

함수도 하나로??

보통 함수도 아래처럼 하나씩 다 선언을 해서 사용했을거다.

const handleId = e => {
  setId(e);
};

const handlePw = e => {
  setPw(e);
};
const handleEmail = e => {
  setEmail(e);
};

하지만 아래처럼 name과 value를 이용해 하나의 함수로 여러 state 를 컨트롤 가능하다!
컨트롤을 하기위해선 인풋, 폼 에서 name 이라는 속성을 부여해주어야한다.

<input type=text name=id onChange={handleInput}/>
<input type=text name=pw onChange={handleInput}/>
<input type=text name=email onChange={handleInput}/>

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