[React] 여러 개의 입력값인 useState 관리하기

✨ 미리 보기

[문제상황] 입력값을 제어하기 위해 여러 개의 useState를 쓰고 있는데 중복되는 코드가 너무 많다.
[해결책] 객체로 관리하거나 useReducer를 사용하자.

문제 상황

const View = () => {
 const [name, setName] = useState("");
 const [date, setDate] = useState("");
 const [country, setCountry] = useState("");
  
 const onChangeName = (e) => {
  setName(e.target.value); 
 }
 
 const onChangeDate = (e) => {
  setDate(e.target.value); 
 }
 
 const onChangeCountry = (e) => {
  setCountry(e.target.value); 
 }
 
 return (
	<input type="text" value={name} onChange={onChangeName}/>
	<input type="date" value={date} onChange={onChangeDate}/>
  	<input type="text" value={country} onChange={onChangeCountry}/>
 )
}

onChange 함수를 한 state마다 하나하나 다 만들어내면 중복코드가 많이 발생하고 함수를 저장하는 비용이 늘어서 좋은 코드가 아닌 것 같다.

해결 방안

const View = () => {
 // 여러 개의 값을 넣을 수 있는 객체를 만든다.
 const [input, setInput] = useState({
 	name: "",
   	date: "",
   	country: "",
 })
 
 // onChange 함수를 공통된 로직만 가져올 수 있게 추상화한다.
 //	객체와 같은 참조형 state를 변경할 때는 스프레드 연산자를 이용하는 게 좋다.
 // 대괄호 표기법을 이용하여 e.target.name을 가져오자. 
 const onChange = (e) => {
  setInput({
    ...input,
    [e.target.name]: e.target.value
  }); 
 }
 
 
 return (
	<input name="name" type="text" value={name} onChange={onChange}/>
	<input name="date" type="date" value={date} onChange={onChange}/>
  	<input name="country" type="text" value={country} onChange={onChange}/>
 )
}