(React) form data event 처리

아래와 같은 form 디자인이 있고 입력데이터를 보관하기 위해 오른쪽과 같이 useState 를 정의 할 수 있다.

const [data, setData] = useState( {             address1: "",             address2: "",             zip: "",             city: "",             state: "",             country: "",  });

 

이벤트 정의의 비효율 코드와 효율적인 코드 예

비효율적 코드	효율적 코드
control의 이름을 onChange의 argument로 전달	control 의 name 프로퍼티를 지정하고  event.target.name 으로 꺼내서 사용
const onChange = (key) => (evt) => {     setData((oldData) =>({ ...oldData, [key]: evt.target.value })); };	const onChange = (evt) => {   const key = evt.target.name;   const value = evt.target.value;   setData((oldData) => ({ ...oldData, [key]: value })); };
<label>Address line 2:    <input value={data.address2}              onChange={onChange("address2")} /> </label>	<label>Address line 2:    <input value={data.address2}               name="address2"               onChange={onChange} /> </label>