여러개의 input 상태 관리하기

form에 너무 많은 input이 있었는데 하나하나 useState로 관리하기 싫었고 사실 그렇게 작성하면서
이게 좋은 방법인가? 하는 의문이 생겼다.

 

그러던 와중에 이 글을 발견했는데, 이 글을 보고 따라하니 여러개의 input을 하나의 state로 관리할 수 있어서 좋았다!

 

  const [inputs, setInputs] = useState({
    receiver: '',
    phone_number1: '',
    phone_number2: '',
    phone_number3: '',
    zip_code: '',
    address1: '',
    address2: '',
    address_message: '',
  });

 우선 inputs를 만들고 초기값을 객체로 줬다.

 

  const {
    receiver,
    phone_number1,
    phone_number2,
    phone_number3,
    zip_code,
    address1,
    address2,
    address_message,
  } = inputs;

비구조화 할당을 통해 값을 추출하고

 

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

이 많은 input을 제어할 함수를 만든다.

(자세한 설명은 위에 참고했던 글에 쉽게 설명되어 있다.)

 

        <ReceiverInput name="receiver" value={receiver} onChange={onChange} />
          <PhoneNumInput
            name1="phone_number1"
            value1={phone_number1}
            name2="phone_number2"
            value2={phone_number2}
            name3="phone_number3"
            value3={phone_number3}
            onChange={onChange}
          />
          <AddressInput
            name1="zip_code"
            value1={zip_code}
            name2="address1"
            value2={address1}
            name3="address2"
            value3={address2}
            onChange={onChange}
            setInputs={setInputs}
            inputs={inputs}
          />
          <AddressMessageInput
            name="address_message"
            value={address_message}
            onChange={onChange}
          />

각 input에 name으로 객체의 키 값을 주고 각각 onChange 함수를 준다.

 

이렇게 하니 여러개의 input을 한번에 제어할 수 있어서 좋았다.

 

혹시라도 useForm을 사용해서 input을 제어한다면 거의 비슷한데

 

          <NameTextInputBox
            value={name}
            register={register}
            handleInput={handleInput}
            errors={errors}
            marginB="16px"
          />

value는 똑같이 작성해주고 input을 제어하던 함수를 넘겨주고 register를 넘겨준다. 나머지는 register안에서 처리할 예정.

 

      <Input
        type="text"
        id="input_text_input"
        wd="100%"
        value={value}
        {...register('name', {
          required: '필수 정보입니다.',
          onChange: (e) => {
            handleInput(e);
          },
        })}
      />

register('이름' (위에서 name에 넣었던 이름), {onChange: 값이 바뀔 때 실행될 함수} 

 

이런식으로 사용해준다. react-hook-form을 사용한 자세한 내용은 이 글을 봐주세요!

 

 

📍틀린 부분이 있다면 말해주세요!

 

참고

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