최적화: 비구조화(구조분해, destructuring) 할당을 통해 state갯수 줄이기

state들이 한꺼번에 변화하고 같은 성질을 가진다면 아래와 같이 destructuring assignment를 통해 묶어서 사용

 

화면에 나타나는 변화하는 값들을 state로 사용하되 변화가 한꺼번에 일어나는 것이라면 하나의 state로 묶어서 사용

const [inputs, setInputs] = useState({ username: "", email: "" });
const { username, email } = inputs;

위와 같이 사용하면 inputs.username이렇게 매번 inputs.붙이지 않아도 됨

 

inputs[name] = value; (x)

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

세팅할때는 위와 같이 해야함