[ React ] form에서 onChange 하나로 사용하기

 

 

위 사진처럼 여러 개의 input이 있을 때 어떻게 하면 효율적으로 관리할 수 있을까?

 

각각의 input에 onChange 함수를 따로 걸어주게 되면 관리해야 하는 코드가 굉장히 길어진다. 그렇기 때문에 단 하나의 함수로 모든 input 변수의 변경을 관리하는 것을 목표로 했다.

 

 

구현

const [inputs, setInputs] = useState({
    name: "",
    rhType: RhType.RHPLUS,
    bloodAmount: "",
    blood: Blood.A,
    sex: GenderType.MALE,
    bloodType: BloodType.WHOLE,
    wallet: "",
    birth: today,
    createdDate: today,
    place: organName,
  });

 

여러 개의 input 값을 하나의 객체로 관리하여 하나의 함수로 변수 값을 변경할 수 있도록 했다.

 

  const {
    blood,
    name,
    sex,
    bloodType,
    wallet,
    birth,
    createdDate,
    place,
    rhType,
    bloodAmount,
  } = inputs;

  const onChangeValue = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;

    setInputs({
      ...inputs,
      [name]: value,
    });
  };

 

객체의 상태를 업데이트 할 때,

1. 기존의 객체 상태를 복사해놓은 다음 ...inputs

2. 그 값에서 특정 값을 덮어씌운 다음, 그 값을 새로운 상태로 설정해줘야 함 [name]: value

 

 

결과적으로 데이터의 불변성을 지켜 컴포넌트 업데이트 성능을 최적화하고, 코드를 간결하게 유지할 수 있었다.