[REACT] useState 하나로 여러개 관리하기

컴포넌트 내, 상태를 관리할 때는 useState 를 사용한다. 상태가 여러 개일 경우 상태마다 useState 를 각각 부여하여 사용할 수 있지만, 관리에 용이성이 떨어진다. 하나의 useState 로 여러 개의 상태를 관리하는 방법을 소개한다.

각각의 상태 값을 줄 경우

const test () => {
  const [name, setName] = useState("");
  const [age, setAge] = useState("");
  
  const onChangeName = event => {
    setName(event.target.value);
  }
  
  const onChangeAge = event => {
    setAge(event.target.value);
  }
  
  return(
  	<div>
    	<input value={name} onChange={onChangeName}/>
    	<input value={age} onChange={onChangeAge}/>
    </div>
  );
}

저렇게 관리해야 할 상태가 두개만 있을 경우는 각각 써줘도 좋지만, 여러 개가 있을 경우... 귀찮아진다.

useState 하나로 여러 상태를 관리할 경우

const initialValue = {
	name: "",
  userId: "",
  password: "",
  email: "",
};

const test = () => {
  const [inputValues, setInputValues] = useState(initialValue);
  const {name, userId, password, email} = inputValues;	//비구조화 할당
	
  const onChangeInput = event => {
    const {value, name: inputName} = event.target;
    setInputValues({...inputValue, [inputName]: value});	//spread 연산자
  }
  
  return(
  	<div>
    	<input name='name' value={name} onChange={onChangeInput}/>
    	<input name='userId' value={userId} onChange={onChangeInput}/>
    	<input name='password' value={password} onChange={onChangeInput}/>
    	<input name='email' value={email} onChange={onChangeInput}/>
    </div>
  );
}

주의할 점! 객체 수정 시, 직접 수정 inputValues[inputName] = value 또는 기존 객체를 = 으로 대입하여 수정하면 안된다. React는 불변성을 지켜야하기 때문.