[React] 객체화를 통하여 더욱 효율적이게 상태 관리를 해보기 (회원가입)

💭 오늘의 고민

회원가입 컴포넌트를 만들던 중 고민의 빠졌다. 

우선 코드부터 봐보자.

 

Join 컴포넌트

export default function Join() {
  //회원 정보 상태 변수수
  const [id, setId] = useState("");
  const [pw, setPw] = useState("");
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [addr, setAddr] = useState("");

  //Input Change 이벤트 핸들러
  const onChangeId = (e) => {
    setId(e.target.value);
  };
  const onChangePw = (e) => {
    setPw(e.target.value);
  };
  const onChangeName = (e) => {
    setName(e.target.value);
  };
  const onChangeEmail = (e) => {
    setEmail(e.target.value);
  };
  const onChangePhone = (e) => {
    setPhone(e.target.value);
  };
  const onChangeAddr = (e) => {
    setAddr(e.target.value);
  };
  return (
    <div>
      <input onChange={()=> onChangeId()} type="text" value={id} />
      <input onChange={()=> onChangePw()} type="password" value={pw} />
      <input onChange={()=> onChangeName()} type="text" value={name} />
      <input onChange={()=> onChangeEmail()} type="email" value={email} />
      <input onChange={()=> onChangePhone()} type="tel" value={phone} />
      <input onChange={()=> onChangeAddr()} type="text" value={addr} />
    </div>
  );
}

 👉 Input 을 통해 회원의 정보를 입력받아 값을 상태변수로 관리한다.

 

 

❗ 문제점

중복되는 코드가 많다.

 

입력할 때 마다 일어나는 onChange 이벤트 핸들러의 구현 코드는 다 동일 한데

입력 데이터 하나하나 다 다른 핸들러를 구현해 놓았다.

 

게다가 전부 독립적인 데이터 이기때문에 각각의 해당하는 데이터의 값을 할당해 주어야 하기 때문에

상태 변수 또한 하나하나 State 변수로 만들어 관리를 해야한다는 점

 

 

 

---

💡  해결방안

만약 이 상태변수들과 이벤트 핸들러들을 각각 하나로 묶어서 그 안에서 관리를 할 수 있을까?

상태변수{ }
이벤트 핸들러 { }

객체화를 한다면 가능하다.

 

상태 변수 객체화 와 이벤트 핸들러 객체화 를 통하여 더욱 더 간결하고 중복되지 않는 코드를 만들 수 있다.

 

 

---

 

🔷 객체화 적용

◾ 상태 변수 객체화

  const [member, setMember] = useState({
    id: "",
    pw: "",
    name: "",
    email: "",
    phone: "",
    addr: "",
  });

👉 모든 회원 정보 상태 변수들을 member 변수의 객체 속성으로 관리

---

◾ 이벤트 핸들러 객체화

<div>
      <input onChange={() => onChangeMember(e)} name="id" type="text" value={userId} />
      <input onChange={() => onChangeMember(e)} name="pw" type="password" value={userPw} />
      <input onChange={() => onChangeMember(e)} name="name" type="text" value={userName} />
      <input onChange={() => onChangeMember(e)} name="email" type="email" value={userEmail} />
      <input onChange={() => onChangeMember(e)} name="phone" type="tel" value={userPhone} />
      <input onChange={() => onChangeMember(e)} name="addr" type="text" value={userAddr} />
    </div>

👉  우선 이벤트 핸들러는 onChangeMember 하나로 통일
       각각의 Input name 속성에 값을 지정해준다.

  const onChangeMember = (e) => {
    setMember(
    	{ ...member, [e.target.name]: e.taeget.value }
    );
  };

👉  onChangeMember 이벤트 핸들러로 통일하여 setMember 를 통해 저장

 

 

🔍 저 구조패턴은 무엇일까?

{ ...객체, 속성: 값 }

 

객체를 업데이트할 때 기존 데이터를 유지하면서 특정 속성만 변경하는 방법이다.

 

member의 속성을 펼쳐놓고 기존의 데이터를 유지하며

이벤트 리스너를 발생 시킨 Input을 name 속성으로 찾아 입력한 Value 값을 저장하는것이다.

 

즉

ID 를 입력할 경우 name 속성값인  id 를 찾아

member.id = 입력한 아이디(Value) 인것이다.

 

 

❓ . . . 객체란

[ 펼침 연산자 ] 로 객체의 속성들을 펼쳐놓아 꺼낼 수 있는 상태를 말한다.