여러 state들을 관리하실때 어떻게 하시나요?

우리가 회원가입이나 회원정보를 관리하는 기능을 만들때 아이디,비밀번호,이름 등 관리해야할 정보가 많고,
입력을 위한 그 값의 변화를 설정해야하며 리액트에서 우린 그것을 대부분 state로 관리합니다

state들이 너무 많으면 관리가 힘들고 그 state들의 set함수들 때문에 같은 내용의 함수를 사용할때 따로 분리하거나 조건을 붙여야 한다

예시

import { useState } from "react";

function FormEvent() {
  const [names, setName] = useState("");
  const [id, setId] = useState("");
  const [password, setPassword] = useState("");

  const handleNameChange = (e) => {
    const { value } = e.target;
    setName(value);
  };
  const handleIdChange = (e) => {
    const { value } = e.target;
    setId(value);
  };
  const handlePassChange = (e) => {
    const { value } = e.target;
    setPassword(value);
  };

  return (
    <>
      <input name="name" value={names} onChange={handleNameChange}></input>
      <input name="id" value={id} onChange={handleIdChange}></input>
      <input
        name="password"
        value={password}
        onChange={handlePassChange}
      ></input>
    </>
  );
}

export default FormEvent;

이렇게 따로 분리를 하거나

import { useState } from "react";

function FormEvent() {
  const [names, setName] = useState("");
  const [id, setId] = useState("");
  const [password, setPassword] = useState("");

  const handleChange = (e) => {
    const { name, value } = e.target;
    if(name==="name")
    setName(value);
    else if(name==="id")
    setId(value);
    else if(name==="password")
    setPassword(value);
  };

  return (
    <>
      <input name="name" value={names} onChange={handleChange}></input>
      <input name="id" value={id} onChange={handleChange}></input>
      <input name="password" value={password} onChange={handleChange}></input>
    </>
  );
}

조건문을 걸어 지저분하게 된다

이 모든 state를 하나의 객체 state로 관리한다

이 여러개의 state들을 하나의 객체 state로 묶어내면 편하게 할 수 있다.
예시

import { useState } from "react";

function FormEvent() {
  const [info, setInfo] = useState({
    name: "",
    id: "",
    password: "",
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setInfo((preValue) => ({
      ...preValue,
      [name]: value,
    }));
  };

  return (
    <>
      <input name="name" value={info.name} onChange={handleChange}></input>
      <input name="id" value={info.id} onChange={handleChange}></input>
      <input
        name="password"
        value={info.password}
        onChange={handleChange}
      ></input>
    </>
  );
}

export default FormEvent;

객체 초기값으로 관리할 state들을 속성이름과 그 값을 주면 객체.속성으로 관리 할 수 있는데

1.onChange 함수가 발생하는 대상의 name,value를 구조분해를 통해 받아내고

2.setInfo((prevValue)=>)에서 prevValue는 state를 변경하기전 현재 state값으로

3.return할 객체에 ...(spread)로 현재 state값을 넣어주고 [name]:value로 변경할 속성만 갱신해준다.

이처럼 여러 state들을 간편하게 관리하는 방법이었습니다.